How can I load css or js file in codeigniter 4?

Question

When I am trying to load css or javascript file then it returns 404 error.

I've tried to use helpers such as HTML helper's link_tag, URL helper's base_url methods, it will make a route to the file, but not loadable.

This is my Controller:

class Pages extends Controller{

    public function viewPage($page)
    {
        if(!is_file(APPPATH."/views/pages/$page.php")){
            throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
        }

        helper('html');

        $data['title'] = $page == 'noticeboard' ? "page1" : "page2";

        if($page != "index"){
            echo view('templates/header', $data);
        }

        echo view("pages/$page", $data);

        if($page != "index"){
            echo view("templates/footer", $data);
        }
    }

}

My Router:

$routes->get("/", "Pages::viewPage/index");

Header in HTML:

<?=link_tag('public/css/style.css')?>

The assets folder is located in the very root of htdocs(I'm using xampp apache server).

And when I try to load CSS or JS, I get this error:

I'm completely new to CodeIgniter, so any bits of help would be appreciated.

Directory structure:

htdocs
  -public
    --CSS
     ---style.css
    --JS
     ---app.js
  -app
    --controllers
      ---Page.php
    --views
      ---pages
        ----index.php

* I've changed my CSS, JS file routes from assets to public *

Please show us your folder structure then only we can tell you the accurate solution — bhuvnesh pattnaik, Oct 15 '19 at 10:45
@bhuvneshpattnaik Added. Application folder has changed the name into 'app' since CodeIgniter 4. — YJM, Oct 15 '19 at 11:35
try replacing `public/css/style.css` to `/css/style.css` in the line `=link_tag('public/css/style.css')?>` — bhuvnesh pattnaik, Oct 15 '19 at 11:43

score 9 · Accepted Answer · answered Oct 15 '19 at 11:49

9

As app is sibling folder of public folder,

And as per codeIgniter 4 .

anything you put in public folder can be accessed directly.

so it should be something like below to get css applied to the view.

In views folder lets say there's a file as index.php

then code should be like below:

index.php

    <link rel="shortcut icon" type="image/png" href="/css/style.css"/>

answered Oct 15 '19 at 11:49

bhuvnesh pattnaik

1,365
7
14

If you want to protect your source files from access from outside, you should not put them in the public directory. See details here: https://stackoverflow.com/questions/19820314/codeigniter-assets-folder-best-practice – user2345998 May 05 '20 at 17:53
@bhuvnesh pattnaik I am also having the same issue. Apparently I tried to create assets folder which is same level as app folder and also tried putting the css file in the public folder, it is still showing file not found error. – Dr3am3rz Jul 13 '20 at 10:32

score 3 · Answer 2 · 2019-10-15T10:16:01.883

3

Try this

$config['base_url'] = "http://ur_site_url.com/";

Than in your view

<?php echo base_url('assets/css/style.css'); ?>

edited Oct 15 '19 at 10:16

answered Oct 15 '19 at 09:59

What do you mean 'after that'? – YJM Oct 15 '19 at 10:11
I mean configure your settings and then in main view use `base_url()` – Oct 15 '19 at 10:15
This answer is for CodeIgniter 3 not CodeIgniter 4 as CI4 does not use configuration arrays anymore. – billywafuu May 20 '20 at 18:18

score 2 · Answer 3 · answered Nov 01 '21 at 19:27

2

You can also use the html helper and add the stylesheet with link_tag depending on your setup and if you hide the public folder in your url, you must add public to the url.

<?php echo link_tag('public/css/style.css'); ?>

answered Nov 01 '21 at 19:27

mdgeus

372
2
8

score 1 · Answer 4 · answered Jun 19 '21 at 06:01

1

GOTO config/App.php and change this variable

public $baseURL = 'http://yoursite';

then you can access it as

<?php echo base_url();?>

answered Jun 19 '21 at 06:01

RIZI

104
1
7

Nims Patel · Answer 5 · 2019-10-15T10:57:26.840

0

Did you add base_url in the application/config/config.php file? Here: http://prntscr.com/pji8a5

Site URL is not defined which you give.

You have given http://localhost:8080/css.....

But It should http://localhost:8080/SITE_URL/css.....

If you add $config['base_url'] = "http://site_url.com/"; then you can give direct base_url('assets/css/style.css');

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

Thanks

edited Oct 15 '19 at 10:57

answered Oct 15 '19 at 10:45

Nims Patel

1,048
9
19

I've changed base_url like this: ```public $baseURL = 'http://localhost';``` (I think it's different because this is codeigniter 4. I didn't had application folder at all), but the error is not fixed. – YJM Oct 15 '19 at 11:21
What is your project folder name? You should give `$baseURL = 'http://localhost/project_name';` @YJM – Nims Patel Oct 15 '19 at 12:06
1

That's CI3 not CI4. CI4 no longer uses $config[] array like that – Enoch Apr 13 '20 at 22:23

How can I load css or js file in codeigniter 4?

5 Answers5

Linked