How can I include css and js file in codeigniter

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); 
}

dont you need this $this->config->item('item name'); somewhere in your code? — CodeGodie
– CodeGodie, Commented Aug 16, 2015 at 15:48
CodieGodie $base , $css, $js are defined in controller $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') ); — user
– user, Commented Aug 16, 2015 at 16:34
how are you passing your data to your view? is it still not working? — CodeGodie
– CodeGodie, Commented Aug 16, 2015 at 16:59
CodieGodie public function index() { $data=$this->data; $data['error']=''; $this->load->view('index',$data); } — user
– user, Commented Aug 16, 2015 at 17:05

evrim oku · Accepted Answer · 2015-08-17 01:15:59Z

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');

Community · Accepted Answer · 2017-05-23 12:25:39Z

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.

Likeee · Accepted Answer · 2015-08-16 15:51:47Z

0

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().

answered Aug 16, 2015 at 15:51

Likeee

112 bronze badges

Comments

cartalot · Accepted Answer · 2015-08-17 00:53:32Z

0

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.

answered Aug 17, 2015 at 0:53

cartalot

3,1281 gold badge19 silver badges15 bronze badges

Collectives™ on Stack Overflow

How can I include css and js file in codeigniter

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related