Dynamic Dropdown Menu using Bootstrap 4 in CodeIgniter

Submitted by nurhodelta_17 on Friday, April 6, 2018 - 23:52.

If you don't have CodeIgniter installed yet, you can use this link to download the latest version of CodeIgniter. Take note that I've used 3.1.7 in this tutorial. After downloading, extract the file in the folder of your server. Since I'm using XAMPP as my localhost server, I've put the folder in htdocs folder of my XAMPP. Then, you can test whether you have successfully installed codeigniter by typing your app name in your browser. In my case, I named my app as ci_dynamic_dropdown so I'm using the below code.

localhost/ci_dynamic_dropdown

Removing index.php in our URLs

By default, index.php is included in every URL of our app. To remove this, please refer to How to Remove Index.Php in the URL of Codeigniter Application.

Creating our Database

I've included a .sql file located in db folder in the downloadable of this tutorial. All you need to do is import the file into your phpMyAdmin. If you have no idea how to import, please refer to my tutorial How import .sql file to restore MySQL database. You should be able to add a database named test.

Connecting our App into our Database

Next, we're going to connect our codeigniter application to the database that we created earlier. 1. In your codeigniter app folder, open database.php located in application/config folder. 2. Update database.php with your credential the same as what I did in the codes below.

$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
);

Creating our Model

Next, we create the model for our app. Take note that the first letter of your model name should be in CAPITAL letter and the name of the model should be the same as the file name to avoid confusion. Create a file named Category_model.php in application/models folder of our app and put the ff codes:

<?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();
        }
 
}

Creating our Controller

Next step is to create our controller. Controllers follow the same naming convention as models. Create a file named Main.php in application/controllers folder of our app and put the ff codes.

<?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);
        }
 
}

Configuring our Default Controller

Next, we are going to set our default controller so that whenever we haven't set up a controller to use, this default controller will be used instead. Open routes.php located in application/config folder and set the default route to our user controller. Note: While we name controllers using CAPITAL letter in this first letter, we refer to them in SMALL letter.

$route['default_controller'] = 'main';

Creating our View

Lastly, we create the views of our app. I've used Bootstrap 4 and jQuery in this tutorial which are included in the downloadables but if you want you may download them yourself. For Bootstrap 4 For jQuery Create the ff files inside application/views folder. home.php

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>Dynamic Dropdown Menu using Bootstrap 4 in 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="#">SourceCodeSter</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>

That ends this tutorial. Happy Coding :)

Add new comment

2847 views