Bootstrap MySQL PHP

Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL

navbar-dinamis-bootstrap-php-mysql
Written by Fatoni

Membuat Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL. Bootstrap lagi :). Kali ini tutorial membuat menu navbar dinamis dengan Boostrap, PHP dan MySQL. Setelah beberapa saat yang lalu saya juga menulis artikel tentang 3 Free Bootstrap Admin Template.

Apa sih maksud dari Navbar Menu Dinamis dengan Bootstrap, PHP dan MySQL?

Biasanya kan Navbar menu yang dibuat selalu Statis atau tetap atau merubahnya secara manual (dengan menuliskan kode html). Nah, sekarang saya akan mencoba cara membuat Navbar Menu tersebuat bisa Dinamis, data menu tersebut di ambil dari database MySQL dengan kode PHP.

Anda bisa melihat contoh Navbar Bootstrap yang Statis Disini. Nanti akan kita buat Navbar tersebut Dinamis dan bisa di rubah dari database.

Oke, langsung saja tutorialnya dimulai πŸ™‚

Pertama tentu saja buat database dulu, dalam kasus ini saya membuat database dengan nama tutorialweb. Kemudian dumping Script SQL di bawah ini di phpMyAdmin.

Dari Script di atas Anda akan mendapatkan 2 (dua) table dengan nama menu dan submenu. Kemudian Insertkan data kedalam kedua table tersebut, dumping saja Script SQL di bawah ini πŸ™‚

Dari Script di atas Anda akan mendapatkan beberapa data di table menu, dan beberapa data di table submenu dan sudah terelasi dengan table menu.

Perhatikan bahwa Table submenu terelasi dengan table menu dengan adanya field menu_id dalam table submenu.

Ini ilusrasi relasi antara table menu dan submenu

Dinamis Navbar Bootstrap PHP MySQL

Jadi untuk menambahkan submenu, field menu_id di table submenu harus sama dengan menu_id di table menu.

Selanjutnya Anda download Bootstrap di website resminya http://getbootstrap.com/

Jika sudah di download maka ekstrak file tersebut, maka Anda akan mendapat 3 (tiga) buah folder yaitu css, fonts dan js.

Kemudian buat file PHP baru dengan nama index.php dan ketikkan script di bawah ini:

Jika sudah jangan lupa disimpan.

Dan struktur folder Anda akan tampil seperti bawah ini:

struktur-folder-navbar-dinamis

Dan jika berhasil maka tampilannya seperti di bawah ini

preview-navbar-dinamis

Saya jelaskan sedikit tentang script di atas, saya hanya akan jelaskan baris kode ke 30 – 53 karena inilah yang menampilkan item-item menu dan sub menu.

  • Baris 31-32 : melakukan koneksi ke database (ganti dengan koneksi Anda)
  • Baris 33 : membuat variabel menu dan melakukan query dengan menyeleksi table menu dengan mengurukan field menu_id dari yang terkecil
  • Baris 34 : melakukan perulangan while dari query menu
  • Baris 35 : membuat variabel menu_id dan berisi data dari field menu_id dari table menu
  • Baris 36 : membuat variabel submenu dan melakukan query ke database dengan menyeleksi table submenu dengan kondisi dimana menu_id di table submenu itu sama dengan field menu_id pada table menu
  • Baris 37 : jika hasil query submenu tidak ada hasilnya, maka menjalankan baris kode ke 38, dan jika ada hasilnya maka menjalankan baris kode ke 40-50
  • Baris 38 : menampilkan menu yang tidak mempunyai submenu (dropdown)
  • Baris 41 : menampilkan menu yang terdapat submenu(dropdown)
  • Baris 44 : melakukan perulangan while dari query submenu untuk menampilkan dataΒ submenu.
  • Selesai.

Nah silahkan coba… semoga berhasil.. πŸ™‚

About the author

Fatoni

Programming is my hobby, not my job.

57 Comments

Leave a Comment