Controllers placed in Sub-Folders have no content

Question

I am using a PHP Framework for the first time to get away from writing spaghetti code and so far it is wonderful. I am using Code Igniter and have a base Controller named "Dashboard.php" that loads fine and looks perfect.

When attempting to create some organization, I placed my "Devices.php" into a "Controllers/Devices" sub-folder, then accessed it at "http://domain.com/devices/devices" which loads the text, but the images/css/etc. are missing.

The content of the "Devices" controller is exactly the same as my "Dashboard" so I am not understanding why only the text loads. If I move the "devices.php" file into the root Controllers directory, there are no problems.

class Devices extends CI_Controller
{

    public function index()
    {
        $data['page_title'] = 'Device Portal';

        $this->load->view('meta');
        $this->load->view('sidebar');
        $this->load->view('userbar');
        $this->load->view('header');
        $this->load->view('devices/content');
        $this->load->view('footer');
    }

}

Here is the "Sidebar.php" View...

<!-- Left side content -->
<div id="leftSide">
    <div class="logo"><a href="index.html"><img src="assets/images/logo.png" alt="" /></a></div>

    <div class="sidebarSep mt0"></div>

    <!-- Search widget -->
    <form action="" class="sidebarSearch">
        <input type="text" name="search" placeholder="search..." id="ac" />
        <input type="submit" value="" />
    </form>

    <div class="sidebarSep"></div>

    <!-- General balance widget -->
    <div class="genBalance">
        <a href="#" title="" class="amount">
            <span>General balance:</span>
            <span class="balanceAmount">$10,900.36</span>
        </a>
        <a href="#" title="" class="amChanges">
            <strong class="sPositive">+0.6%</strong>
        </a>
    </div>

Answer 1

You need to avoid using relative paths when linking to images/css/etc in your views.

As an example, when you use assets/images/logo.png (relative path) from the page http://domain.com/devices/devices, the browser looks for http://domain.com/devices/assets/images/logo.png

Using the same image path with the page http://domain.com/devices the browser will look for http://domain.com/assets/images/logo.png instead.

When specifying urls to pages, images, etc within your domain, use the URL helper functions to automatically format your urls.

You want to avoid writing urls like this:

<script type="text/javascript" src="./assets/js/jquery.js"></script>
<img src="assets/images/logo.png" alt="" />

And instead generate your urls like this:

<script type="text/javascript" src="<?php echo base_url('assets/jquery.js'); ?>"></script>
<img src="<?php echo base_url('assets/images/logo.png'); ?>" alt="" />

Which will output:

<script type="text/javascript" src="http://domain.com/assets/js/jquery.js"></script>
<img src="http://domain.com/assets/images/logo.png" alt="" />

Answer 2

In Codeigniter use base_url() function to print assets.

<img src="<?php echo base_url('assets/images/logo.png');?>" alt="" />

This function automatically generate domain before the url.