I am using plenty of CSS and JavaScript in my CodeIgniter application.
Here is my sample controller.
public function index() {
$this->load->view('site/title');
$this->load->view('site/menu');
$this->load->view('site/asset');
$this->load->view('site/css');
$this->load->view('site/js');
$this->load->view('site/content');
}
Though I load the CSS files and JavaScript files in the view itself like this:
<link href="<?php echo base_url()?>css/all.css" rel="stylesheet">
<link href="<?php echo base_url()?>css/theme.css" rel="stylesheet">
What I want is if I change the CSS folder location to some other i.e., (asset/css)
I need to change the path in all the functions. How can I avoid this and make it simple?
You can do it by it by creating a common loader, which loads css, js and menu by default and then loading the main content dynamically according to the need.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class site extends CI_Controller
{
//public loader here
public function loader($common)
{
$this->load->view($common);
$this->load->view('site/asset'); //which contains the css, js and menu folder
}
//index page here
public function index()
{
$this->loader('index');
}
//about page here
public function about()
{
$this->loader('about');
}
//blog page here
public function blog()
{
$this->loader('blog');
}
}
You could put your assets in an array then do a foreach
loop:
<?php
$assets = array ( 'all.css', 'theme.css', ... );
foreach($assets as $asset) {
echo "<link href=\"<?php echo base_url()?>css/" . $asset . "\" rel=\"stylesheet\">" . "
";
}
?>
output:
<link href="<?php echo base_url()?>css/all.css" rel="stylesheet">
<link href="<?php echo base_url()?>css/theme.css" rel="stylesheet">
You can create a library to manage your assets in app/libraries
like
class Assets{
/** url to assets dir */
protected $urlToAssets
/** @var array */
protected $cssFiles;
public function __construct()
{
$this->urlToAssets = base_url('assets/');
$this->cssFiles = array();
}
function addCss($name)
{
$this->cssFiles[] = $name
}
function printCssFiles()
{
foreach ($this->cssFiles as $css)
{
echo '<link href="' . $this->urlToAssets . $css . '" rel="stylesheet">';
}
}
}
Then, in ypur controller you can do:
$this->load->library('assets');
$this->assets->addCss('cool.css');
$this->assets->addCss('cool.plugin.css');
Finally, render the assets in the view:
$this->assets->printCssFiles();
Then, you can improve the library like:
class Assets{
/** url to assets dir */
protected $urlToAssets
/** @var array */
protected $cssFiles;
/** @var array */
protected $jsFiles;
public function __construct()
{
$this->urlToAssets = base_url('assets/');
$this->cssFiles = array();
$this->jsFiles = array();
}
function addCss($name)
{
$this->cssFiles[] = $name
}
function addJs($name, $section = 'header')
{
$this->jsFiles[$section] = $name
}
function printCssFiles()
{
foreach ($this->cssFiles as $css)
{
echo '<link href="' . $this->urlToAssets . $css . '" rel="stylesheet">';
}
}
function printJsFiles($section)
{
foreach ($this->jsFiles as $js)
{
echo '<script src="' . $this->urlToAssets . $js . '"></script>';
}
}
}
Now, in your controller you can do:
$this->load->library('assets');
$this->assets->addJs('jquery.js', 'header');
$this->assets->addJs('jquery.plugin.js', 'footer');
In the header view you call the respective js files:
$this->assets->printJsFiles('header');
Or in footer:
$this->assets->printJsFiles('footer');