How can I include css and js file in codeigniter - php

Question

I am trying toinclude css file in the following code.
Config :
$config['base_url'] = 'http://localhost/ASOFT/Projects/CI_search';
$config['site_url'] = 'http://localhost/ASOFT/Projects/CI_search/index.php';
$config['js'] = 'assets/js';
View:
<link rel="stylesheet" href="<?php echo $base?>/<?php echo $css?>/style.css">
<link rel="stylesheet" href="<?php echo $base?>/<?php echo $css?>/bootstrap.min.css">
<script src="<?php echo $base?>/<?php echo $js?>/jquery.min.js"></script>
<script src="<?php echo $base?>/<?php echo $js?>/jquery.js"></script>
<script src="<?php echo $base?>/<?php echo $js?>/bootstrap.min.js"></script>
I put the css file in CI_search/css and js file in CI_search/assets/js
I got the error undefined variable css and undefined variable js.Please provide solution for this problem.
UPDATE
Controller:
public function index() {
$this->data = array(
'site' => $this->config->item('site_url'),
'base' => $this->config->item('base_url'),
'css' => $this->config->item('css'),
'js' => $this->config->item('js'),
'image'=>$this->config->item('image')
);
$data = $this->data;
$data['error'] = '';
$this->load->view('index',$data);
}

Answer 1

As far as i can see, you din't declared $config['css'] in your config file, so it's normal to get undefined variable error for css. But you shouldn't have problem with js.
When declaring your base_url use trailing slash at the end (eg. "http://localhost/fancysite/")
Also you can use CI's url helper to use functions like base_url() or site_url() and many more. (as #Likee suggested).
config.php
// this should be the first variable in CI's config.php
$config['base_url'] = "http://localhost/ASOFT/Projects/CI_search/";
// many more lines with other configuration variables
// ..................................................
// ..................................................
// ..................................................
// your own configuration variables at the end of file
$config['css'] = 'css/';
$config['js'] = 'assets/css/';
$config['image'] = 'images/';
controller
public function index() {
// loading url helper to use base_url() function in the view,
// if you load this helper in autoload.php you don't need to load it here again
$this->load->helper('url');
// if you didn't declare data as class property
// you can simply use
// $data = array(
// 'css' => $this->config->item('css'),
// 'js' => $this->config->item('js'),
// 'image'=>$this->config->item('image')
// );
$this->data = array(
'css' => $this->config->item('css'),
'js' => $this->config->item('js'),
'image'=>$this->config->item('image')
);
// you really don't need the line below
// $data = $this->data;
$this->data['error'] = '';
$this->load->view('index',$this->data);
}
view
<link rel="stylesheet" href="<?php echo base_url($css . 'style.css'); ?>">
<link rel="stylesheet" href="<?php echo base_url($css . 'bootstrap.min.css'); ?>">
<script src="<?php echo base_url($js . 'jquery.min.js'); ?>"></script>
<!-- do you really need to include jquery.js while you included jquery.min.js above? but here we go :) -->
<script src="<?php echo base_url($js . 'jquery.js'); ?>"></script>
<script src="<?php echo base_url($js . 'bootstrap.min.js'); ?>"></script>
Probably you will need to use url helper a lot. So you can autoload it in autoload.php file in config folder. it must be somewhere around line 90
$autoload['helper'] = array('url');

Answer 2

There are many ways to include css and js file in codeigniter.
This how I do it.
FIRST: Create a folder outside the application folder and named it any named you liked but I prefer to named it as resources. Create a sub folders like js, css, images and others. Place all your files in here for future references.
SECOND: Open the the contants.php saved in application/config and paste this code.
define('CSS', 'http://localhost/yourfolder/resources/css');
define('JS', 'http://localhost/yourfolder/resources/js');
define('IMAGES', 'http://localhost/yourfolder/resources/images');
NOTE: Update this code depends on your needs.
THIRD: On your view file, you can access this files by,
<link rel="stylesheet" href="<?php echo(CSS.'bootstrap.min.css'); ?>">
<script type="text/javascript" src='<?php echo(CSS.'bootstrap.min.css'); ?>'></script>
Refer to this link. How can I include the CSS file in CodeIgniter?
I hope this helped.

Answer 3

Bind your variables to view like this:
$this->load->view('viewName', $config);
And array $config should be available in your controller method.
Instead setting $config['base_url'] you can use function base_url().

Answer 4

well if at all possible determine what your path structure will be and then just use it in the view with base_url() .
<link href="<?php echo base_url();?>assets/css/bootstrap.min.css" rel="stylesheet">
<script src="<?php echo base_url();?>assets/js/blahblah.js"></script>
you can even have a few simple templates, and then call the appropriate template.
if that is impossible - then push this logic and output to a model or similar so that it can be called by different controllers. otherwise you are going to have to update folder names and file paths in your controllers.