Membuat Menu Dinamis Pada Template AdminLTE Dan Codeigniter

Template AdminLTE adalah salah satu template yang paling sering digunakan oleh web developer sebagai backend template pada proyek yang sedang dikerjakan. template ini  dibuat menggunakan framework bootsrap yang merupakan framework CSS yang paling banyak digunakan di kalangan web desainer sekarang. pada artikel ini kita akan belajar bagaimana cara menjadikan menu pada template adminLTE agar menjadi dinamis dengan data berasal dari database.

Untuk bisa mengikuti tutorial ini saya asumsikan anda sudah :

1. Menginstall Dan Konfigurasi Base URL codeigniter
2. Autoload Library Database dan Helper URL
3. Download template adminLTE pada situs https://almsaeedstudio.com/
4. Extrac file AdminLTE-2.3.7.zip dan ubah nama folder AdminLTE-2.3.7 menjadi adminlte2
5. Mengcopy seluruh folder adminlte2 kedalam root project codeigniter.

Membuat Controller

Sekarang kita akan membuat controller terlebih dahulu, controller ini akan kita gunakan sebagai contoh saja nantinya, oke silahkan buat sebuah controller baru dengan nama Latihan.php dan tulis script berikut :

<?php
Class latihan extends CI_Controller{
    function index(){
        $this->load->view('template');
    }
}

Membuat View

Kemudian kita akan membuat viewnya untuk menyimpan script template adminLTE tadi, silahkan buat sebuah file baru dengan nama template.php pada folder view. setelah itu silahkan buka web browser anda dan akses halaman http://localhost/cigrocery/adminlte2/

Lalu klik kanan dan pilih view page source atau tekan Ctrl +u untuk melihat script halaman ini
copy seluruh script nya (CTRL+A) dan paste-kan pada view template.php kemudian save.

Memperbaiki Lokasi Asset Template ( CSS, JS Dan Image )

sampai tahap ini memang tampilan nya masih berantakan, nah untuk memperbaikinya kita harus memperbaiki url asset nya terlebih dahulu agar tampilanya menjadi normal kembali. untuk mempercepat pekerjaan kita dalam memperbaiki sumber asset yang digunakan oleh template adminLTE maka kita akan menggunakan fitur Find And Replace bawaan dari IDE yang kita gunakan, dalam tutorial ini saya menggunakan IDE Netbeans, anda bisa mengakses fitur ini dengan cara klik Menu Edit lalu pilih Replace ( Ctrl + H) lalu lakukan seperti gambar dibawah ini :

Find : dist/ dan Replace : <?php echo base_url();?>adminlte2/dist/
Find : bootstrap/ dan Replace : <?php echo base_url();?>adminlte2/bootstrap/
Find : plugins/ dan Replace : <?php echo base_url();?>adminlte2/plugins/

Membuat Tabel Menu

Langkah yang berikutnya adalah mempersiapkan sebuah tabel dengan nama tabel_menu, tabel ini nantinya akan kita gunakan untuk menyimpan data menu dinamis, yang perlu anda perhatikan adalah field is_main_menu, karena menu ini akan menjadi penanda apakah sebuah record pada tabel_menu akan menjadi main menu atau sub menu nantinya, struktur data dari tabel_menu adalah sebagai berikut :

Insert Data Dummy

Langkah selanjutnya adalah melakukan proses insert beberapa data yang akan kita jadikan simulasi apakah hasilnya berjalan sesuai atau tidak, seperti yang sudah kita bahas di atas bahwa value dari field is_main_menu akan menjadi penanda apakan nanti record tersebuat akan menjadi main menu atau sub menu, jika value nya 0 maka itu artinya record tersebut adalah main menu, tapi jika selain 0 maka dia akan menjadi sub menu dari main menu yang mempunyai value id sesuai dengan value dari tabel is_main_menu.

INSERT INTO `tabel_menu` VALUES (1,'Master Data','#','fa fa-dashboard',0);
INSERT INTO `tabel_menu` VALUES (2,'Keuangan','#','fa fa-dashboard',0);
INSERT INTO `tabel_menu` VALUES (3,'Kategori Barang','kategori','fa fa-dashboard',1);
INSERT INTO `tabel_menu` VALUES (4,'Kategori Merk','merk','fa fa-dashboard',1);
INSERT INTO `tabel_menu` VALUES (5,'Penjualan','penjualan','fa fa-dashboard',2);
INSERT INTO `tabel_menu` VALUES (6,'Pembelian','pembelian','fa fa-dashboard',2);
INSERT INTO `tabel_menu` VALUES (7,'Laporan Bulanan','laporan','fa fa-dashboard',0);

Menampilkan Semua Data Menu

selanjutnya kita akan menampilkan seluruh data dari tabel menu, seperti yang anda lihat sekarang semua data yang sudah anda insert tadi sudah masuk.

lalu jika anda ingin menampilkan data main menu maka anda bisa menggunakan perintah select where untuk mencari record berdasarkan field is_main_menu yang mempunyai value 0 seperti dibawah ini :
lalu jika anda ingin menampilkan data sub menu dari main menu master data maka anda bisa menggunakan perintah select where untuk mencari record berdasarkan field is_main_menu yang mempunyai value 1 seperti dibawah ini :
sampai disini saya harap anda sudah paham tentang logika menampilkan data main menu dan submenu.

Mempelajari Struktur Script Menu

Untuk bisa memodifikasi sebuah script adalah kita harus paham cara kerja script itu terlebih dahulu, oleh karena itu kita akan mempelajari struktur script untuk membuat menu pada template adminLTE. saya akan mengambil contoh menu Layout Option yang merepresentasikan sebuah menu yang mempunyai sub menu dan menu Widgets yang mempresentasikan tabel main menu.

selanjutnya silahkan buka file template.php pada folder views dan cari script ini pada line ke 344 sampai 358

                        <li class="treeview">
                            <a href="#">
                                <i class="fa fa-files-o"></i>
                                <span>Layout Options</span>
                                <span class="pull-right-container">
                                    <span class="label label-primary pull-right">4</span>
                                </span>
                            </a>
                            <ul class="treeview-menu">
                                <li><a href="../layout/top-nav.html"><i class="fa fa-circle-o"></i> Top Navigation</a></li>
                                <li><a href="../layout/boxed.html"><i class="fa fa-circle-o"></i> Boxed</a></li>
                                <li><a href="../layout/fixed.html"><i class="fa fa-circle-o"></i> Fixed</a></li>
                                <li><a href="../layout/collapsed-sidebar.html"><i class="fa fa-circle-o"></i> Collapsed Sidebar</a></li>
                            </ul>
                        </li>
                        <li>
                            <a href="../widgets.html">
                                <i class="fa fa-th"></i> <span>Widgets</span>
                                <span class="pull-right-container">
                                    <small class="label pull-right bg-green">new</small>
                                </span>
                            </a>
                        </li>

Abaikan script pada line 19-21 di atas karena itu digunakan untuk membuat label yang ada pada sebelah kanan menu. penjelasan criptnya adalah sebagai berikut :

1. untuk membuat main manu yang tidak mempunyai sub menu menggunakan elemen <li><a></a></li>
2. untuk membuat main menu yang mempunyai submeneu menggunakan elemen <li> yang mempunya class threeview dan submenu nya dibuat dalam elemen <ul></ul> yang di dalam nya ada elemen <li> lagi.

Membuat Menu Menjadi Dinamis

langkah selanjutnya silahkan  cari script ini pada file template.php pada line ke 331 :

<li class="header">MAIN NAVIGATION</li>

selanjutnya tambahkan script untuk membuat menu dinamis dibawah ini :

                        <?php
                        // data main menu
                        $main_menu = $this->db->get_where('tabel_menu', array('is_main_menu' => 0));
                        foreach ($main_menu->result() as $main) {
                            // Query untuk mencari data sub menu
                            $sub_menu = $this->db->get_where('tabel_menu', array('is_main_menu' => $main->id));
                            // periksa apakah ada sub menu
                            if ($sub_menu->num_rows() > 0) {
                                // main menu dengan sub menu
                                echo "<li class='treeview'>" . anchor($main->link, '<i class="' . $main->icon . '"></i>' . $main->judul_menu .
                                        '<span class="pull-right-container">
                                                <i class="fa fa-angle-left pull-right"></i>
                                            </span>');
                                // sub menu nya disini
                                echo "<ul class='treeview-menu'>";
                                foreach ($sub_menu->result() as $sub) {
                                    echo "<li>" . anchor($sub->link, '<i class="' . $sub->icon . '"></i>' . $sub->judul_menu) . "</li>";
                                }
                                echo"</ul></li>";
                            } else {
                                // main menu tanpa sub menu
                                echo "<li>" . anchor($main->link, '<i class="' . $main->icon . '"></i>' . $main->judul_menu) . "</li>";
                            }
                        }
                        ?>

sehingga sekarang jadinya seperti ini :

selanjutnya anda boleh menghapus script menu yang lain (dari line ke 357 sampai 524) karna merupakan script menu statis dan tidak digunakan lagi, sudah digantikan dengan script menu dinamis dari database tadi.

Penutup Dan Kesimpulan

Sekian penjelesan tentang cara membuat menu dinamis pada template adminLTE, jika ada yang ingin anda tanyakan silahkan mempostingnya pada kolom komentar dan  jika anda membutuhkan script full untuk template ini maka anda bisa mendapatkanya di pastebin.com

Nuris Akbar SST, M.Kom

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

See author's posts