CODEWITHSUNDEEP
phpcodeignitercodeigniter-3
Deekshant Joshi
Deekshant Joshi

Reputation: 73

CodeIgniter- CSS & JS are not loading when the site is run on localhost

I am new to CodeIgniter and the MVC architecture but i know PHP very well. Here is the problem I am facing:

I downloaded the source code of the live website via cpanel (the site is developed on codeignitor) and now I am trying to modifying the site on Localhost.

I need to change the styling of the pages but I can't get the site to load it's CSS & JS on localhost environment, only the html is being loaded. I've checked various configurations and environment settings. In config file I changed $config['base_url']= "http://localhost/sitename/" for localhost and other config variables are already set (since i downloaded the source code).

Now when i run the site on localhost with url http://localhost/sitename/ , only the html is loaded without any styling, css/js nothing!

I also noticed the following : (thought it maybe useful)

in files like header.php and footer.php the CSS & JS files are included like this <link href = "<?php echo WEB_ROOT; ?>/css/main.css" rel = "stylesheet" type = "text/css"/> and <script src="<?php echo WEB_ROOT; ?>/js/main.js"></script>.

Whereas in fact the css and js files are actually present in root\assets\css\ and root\assets\js\

So,

  1. How should I view the complete site (as it was online, with all the css & js) on the localhost? Are there any settings or scripts that i need to change?
  2. How was it actually working on the live website? (with wrong paths set for access to CSS & JS)

Help. Thanks! (Do let me know if I need to furnish more details)

Upvotes: 0

Views: 15732

Answers (5)

Sachith Kaushalya
Sachith Kaushalya

Reputation: 69

Create new folder and named it as you own. I created new folder call "assets". Then it placed inside project folder like as below picture. image of the folder structure

Then i changed config.php file base url path. image of the changed config.php file

After that i added new new helper in controller class. Image of the changed controller class

Finally i link style sheet like as below image.

Upvotes: 0

Pradeep
Pradeep

Reputation: 9717

First things:

Make sure apache has rewrite_mode on and .htaccess file is at the correct location.

In config.php file:

 $config['base_url'] = 'http://localhost/yourappfoldername/';

In controller:

  public function __construct()
{
    parent::__construct();
    $this->load->helper(array('url'));

    //======== or simply ===============

    $this->load->helper('url');

}

your css and js url:

  <link rel="stylesheet" type="text/css" href="<?php echo base_url('index.php/assets/css/styleshee.css');?>">

If you are using mod_rewrite to remove the index.php page set this variable blank:

  $config['index_page'] = '';

.htaccess file (remove index.php):

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule ^(.*)$ index.php/$1 [L] 
 </IfModule>

Change your routes as according without the index.php page. If index.php is removed:

  <link rel="stylesheet" type="text/css" href="<?php echo  base_url('/assets/css/styleshee.css');?>">

Upvotes: 1

notStan
notStan

Reputation: 326

The way I do it is as follows:

<link rel="stylesheet" href=<?php echo base_url('assets/css/main.css'); ?> />

Then when your assets aren't loading, you can troubleshoot it in your web browser. You can do this by clicking inspect > network. Then refresh your page and see where codeigniter is trying to read the files from. If it isn't correct, you can usually see whats going wrong. (for example I once had that my assets were being loaded from: localhost/localhost/assets/*/*
I hope this helps for you.

Upvotes: 1

user4419336
user4419336

Reputation:

Make sure your css and images etc are out side of application folder

project > application

project > assets >

project > assets > css

project > assets > images

project > assets > js

Then autoload url helper. $this->load->helper('url');

Then 

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/styleshee.css');?>">

As you have done set the base url

$config['base_url']= "http://localhost/sitename/";

You may need to include index.php if you are not using .htaccess to create pretty URLs.

<link rel="stylesheet" type="text/css" href="<?php echo base_url('index.php/assets/css/styleshee.css');?>">

Upvotes: 1

DFriend
DFriend

Reputation: 8964

The constant WEB_ROOT is not part of the Codeigniter framework. So the first thing to do is find the definition and change it so it matches the localhost domain. It is probably defined as the specific live domain. Obviously the localhost is some other domain.

Alternatively, do what @wolfgang1983 says in his answer. (Which was posted while I was writing this and is what I was going to say.)

Upvotes: 1

Related Questions