ribbon iwa

Menu Dropdown Dinamis menggunakan Bootstrap 4 pada CodeIgniter

Jika kalan belum mendownload codeigniter dan bootstrap 4 kalian bisa langsung mendwonloadnya di website resminya. Pada kesempatan kali ini kami akan share bagaimana membuta menu dropdown dinamis menggunakan bootstrap pada codeigniter.



Oh ya dikarenakan pada postingan sebelumnya kami telah menelaskan fungsi utama dari setiap folder atau file yang kami buta maka kami ingin mengatakan dalam tutorial berikutnya mengenai CodeIgniter inikami tidak akan menjelaskan satu persatu dikarenakan teman-teman pasti sudah mengetahu struktur dari CodeIgniter dan fungi-fungsi yang ada pada setiap folder, kecuali yang benar2 menurut kam butuh penjelasan.

Konfigurasi yang benar dalam menginstal adalah sebagai berikut application / config/ config.php ganti sesuai dengan nama file atau aplikasi anda.
 $config['base_url'] = 'http://localhost/dropdownci/'; 

Database
Buat database dengan nama test kemudian masukkan struktur databse dibawah.
 CREATE TABLE `categories` (
  `id` int(11) NOT NULL,
  `name` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `categories`
--

INSERT INTO `categories` (`id`, `name`) VALUES
(1, 'Laptop'),
(2, 'Desktop'),
(3, 'Mobile'),
(4, 'Accessories');
 

Koneksi Database
Buka application / config / database.php
 $db['default'] = array(
 'dsn' => '',
 'hostname' => 'localhost',
 'username' => 'root',
 'password' => '',
 'database' => 'test',
 'dbdriver' => 'mysqli',
 'dbprefix' => '',
 'pconnect' => FALSE,
 'db_debug' => (ENVIRONMENT !== 'production'),
 'cache_on' => FALSE,
 'cachedir' => '',
 'char_set' => 'utf8',
 'dbcollat' => 'utf8_general_ci',
 'swap_pre' => '',
 'encrypt' => FALSE,
 'compress' => FALSE,
 'stricton' => FALSE,
 'failover' => array(),
 'save_queries' => TRUE
); 

Buat Model
Buka application / models buat file dengan nama Category_model.php
 <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Category_model extends CI_Model {
 public function __construct(){
  parent::__construct();
  $this->load->database();
 }
 public function getAllCategories(){
  $query = $this->db->get('categories');
  return $query->result();
 }

}
 

Buat Controllers
Buka application / models buat file dengan nama Main.php
 <?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Main extends CI_Controller {
 public function __construct(){
  parent::__construct();
  $this->load->helper('url');
  $this->load->model('category_model');
 }
 public function index(){
  $data['categories'] = $this->category_model->getAllCategories();
  $this->load->view('home', $data);
 }

}
 

Konfigurasi Default Controllers
Buka application / config / routes.php
 $route['default_controller'] = 'main'; 

Buat View
Buka application / views kemudian buat file dengan nama home.php kemudian masukkan code dibawah.
 <!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Dropdown menu menggunakan bootstrap pada codeigniter</title>
 <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>bootstrap4/css/bootstrap.min.css">
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   <a class="navbar-brand" href="https://www.tutorialswb.com/">TutorialsWB</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>

   <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Category
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
         <?php
         foreach($categories as $category){
           echo "
           <a class='dropdown-item' href='#'>".$category->name."</a>
           ";
         }
         ?>
       </div>
     </li>
   </ul>
 </div>
</nav>

<script src="<?php echo base_url(); ?>jquery.min.js"></script>
<script src="<?php echo base_url(); ?>bootstrap4/js/bootstrap.min.js"></script>
</body>
</html> 

Kalian bisa mendownload filenya langsung pada button dibawah.


Sekian share kali ini semoga apa yang kami share di atas bermanfaat bagi anda, jika kalian belum paham silahkan tinggalkan komentar dibawah ini.


SUBSCRIBE TO OUR NEWSLETTER

close