What is the best way to import js and css using CodeIgniter?

Question

Its my first project using CodeIgniter and it is not as easy as it seems.

I have to import different JSs and CSSs in different pages and I'm stuck.

First of all, I've seen that hardcoding echos are not CI way of doing it so I made a simple class like

    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');

    class Fileload {

            public function loadjs($filename)
            {
                echo '<script language="javascript" type="text/javascript" src="'.$filename.'"></script>';
            }
            public function loadcss($filename)
            {
                echo '<link rel="stylesheet" type="text/css" href="'.$filename.'" >';
            }
    }
    ?>

And in my controller I used it like

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Main extends CI_Controller {

    /**
     * Index Page for this controller.
     *
     * Maps to the following URL
     *      http://example.com/index.php/welcome
     *  - or -
     *      http://example.com/index.php/welcome/index
     *  - or -
     * Since this controller is set as the default controller in
     * config/routes.php, it's displayed at http://example.com/
     *
     * So any other public methods not prefixed with an underscore will
     * map to /index.php/welcome/<method_name>
     * @see https://codeigniter.com/user_guide/general/urls.html
     */
    public function index()
    {
        $this->load->library('fileload');

        $this->load->view('head');
        $this->load->view('mainpage');
        $this->fileload->loadjs('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js');
        $this->load->view('tail');
    }
}

But the slick library supposed to be at the bottom right above the 'tail' is at the top inside of head> tag, which is inside view('head');

It seems that the controllers' methods are not running in the sequence I've wrote it down. It should've echoed the script file first.

Can anybody explain how this CodeIgniter controller works??

Create a `header.php` (or others like that), write down your ` — Benyi, Nov 09 '16 at 07:56
@Benyi what if different pages need different scripts? should I be making many of those header.php s? — Sungje Moon, Nov 09 '16 at 08:06
http://stackoverflow.com/a/4895251/6019592 this would probably what you want. Follow it or load the script at each specific view. — Benyi, Nov 09 '16 at 08:18

score 0 · Answer 1 · answered Nov 09 '16 at 09:08

Another thing you could do is implement blade template parser into CodeIgniter. Blade will allow to create sections and that way it would be a lot easier / cleaner to include scripts that are page specific. https://github.com/PhiloNL/Laravel-Blade is where you can get it. Mind you have to use composer for this too.

score 0 · Accepted Answer · answered Nov 14 '16 at 19:05

I just did it by making a view for loading JSs and CSSs

    $data['css']=array('main.css','navbar.css');
    $data['csscdn']=array('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css');
    $data['js']=array('typeahead.js','navbar.js');
    $data['jscdn']=array('//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js');


    $this->load->view('head',$data);
    $this->load->view('mainpage');
    $this->load->view('tail',$data);

Something like this on the controllers and

    <?php 
    if(isset($css)){
    foreach($css as $script):?>
           <link rel="stylesheet" href='<?php echo base_url()."bydcss/".$script;?>'>
    <?php endforeach;
    }
    if(isset($csscdn)){  foreach($csscdn as $script):?>
           <link rel="stylesheet" href='<?php echo $script;?>'>
        <?php endforeach;
    }
    ?>

for head.php

    <?php 
    if(isset($js)){
    foreach($js as $script):?>
       <script type='text/javascript' src = '<?php echo base_url()."bydjs/".$script;?>'></script>
    <?php endforeach;
    }
    if(isset($jscdn)){  foreach($jscdn as $script):?>
       <script type='text/javascript' src = '<?php echo $script;?>'></script>
    <?php endforeach;
    }
    ?>

for tail.php

bit dirty on the views but way simpler for the controllers

What is the best way to import js and css using CodeIgniter?

2 Answers2