CODEWITHSUNDEEP
javascriptphpcssimagecodeigniter
bernadd
bernadd

Reputation: 700

Codeigniter - import JS/CSS/IMG properly

I'm new in MVC learning and after searching for basic stuff, I found several opinions on this question/topic but everyone have different state and instructions...

Does anyone know what is the best place to put assets (js/css/img) files in Codeigniter ?

I found some guys stating to put it in the view folder, someone in the webroot (after creating an asset folder), someone inside the application folder etc so I really got confused.. Does it really depend on the user who is developing the application (so everyone put it in different places) or is there one basic "rule to follow" for that?

Can any expert in Codeigniter post the right answer and explain what is the best way to include those assets and why to do it like that?

Upvotes: 2

Views: 765

Answers (4)

David
David

Reputation: 974

It comes down to taste, to some extent, but my humble suggestion is to use a basic bootstrap pattern which is followed by many frameworks, not just codeigniter. Look at how you would lay out your website based around a theme (https://github.com/twbs/bootstrap) for example.

I don't claim to be expert, but I suggest something very simple and easy to understand for a team:

Folder Structure

/
/css
/js
/application
/bower_components
...

Theme Layout

When working with a page, I don't want to have to think about loading the various libraries and page content, I just want to work simply with the page. To do this, I split the content so I can load it with the following calls:

$this->load->view('site/header'); //Load the header and all the appropriate libs

$this->load->view('/users/edit', array('
   'record' => $this->User->get($userid);   //Work with the actual page
'));

$this->load->view('/site/footer'); //Close all the tags

Typically, I lay the libraries in the root, then load them in a view using absolute paths:

/application/views/site/header.php:

<html>
....
<head>
 <script src="/js/bootstrap.min.js"></script>
 <link href="/css/bootstrap.css" rel="stylesheet">
 </head>
...
<body>
 <navbar>
  ...
 </navbar>
<div id="content">

/application/view/site/footer.php

 </content>
 ... closing tags
 </html>

Repo example

See a blank repo setup with free theme here: https://github.com/DesertLynx/blank_CI

Upvotes: 0

Amin
Amin

Reputation: 682

one thing I like to do other than the answers above is to use a "helper" function to load js, css. this way if you ever change the location of your static content you only need to change it in one location in your code.

function css($filename) {
        return '<link rel="stylesheet" type="text/css" href="' . config_item('base_url') .
                'public/' . $filename . '.css">';
}
function js($filename) {
    return '<script type="text/javascript" src="' . config_item('base_url') .
            'public/' . $filename . '.js "></script>';
}

Upvotes: 1

Albzi
Albzi

Reputation: 15609

I've added them to a file called inc in the same directory as application, system, and user_guide (although I deleted user_guide as soon as it went up onto the server).

Make sure you've set your base_url so that you can call it easier (and autoload the url loader!).

Then when I call it, I use <?=base_url();?>inc/css/styles.css

<link rel="stylesheet" href="<?=base_url();?>inc/css/styles.css

or 

<link rel="stylesheet" href="<?php echo base_url(); ?>inc/css/styles.css

My template will look like this:

--application
--system
--inc
  -- css
      -- style.css
  -- js
      -- scripts.ks
  -- images
      -- logo.png

Upvotes: 1

Pattle
Pattle

Reputation: 6016

Normally when I start a new CodeIgniter project I create a folder called public and then move the index.php file into there. By doing that it means the application and system folders aren't at the same level.

In my application/config/config.php file I added the base_url

$config['base_url'] = 'http://exmaple.com/codeigniter/public/";

Inside the public folder I then create folders called js, css and images. So my structure looks like

 -- application
 -- system
 -- public
    -- css
    -- js
    -- images
    -- index.php

Then in my templates I can just include them by doing 

<link rel="stylesheet" href="<?php echo base_url() ?>css/main.css" />
<script type="text/javascript" src="<?php echo base_url() ?>js/main.js"></script>

You definitely shouldn't be putting any publicly accessible files (stylesheets, images etc) into either the applicaiton or system folders

Upvotes: 1

Related Questions