Codeigniter 4 embedding CSS and JS file

Question

I am new to Codeigniter and I am trying to use Codeigniter 4. What do I have to do in order for me to load my CSS and JS file? I have been spending for the past 7 hours trying to figure out what's wrong but still can't find any solution.

This is my folder structure:

-app
-public
--css
---styles.css
--js
---mainjs.js
--img
-system
-writable

The file is there and I even tried to put the exact path instead of using base_url but I keep getting either file not found error or internal server error message. The tutorial or guide I see on the net, all I saw was pointing the path to the file location and it works for them. There are limited answers posted here too which is based on Codeigniter 4.

.env file
 app.baseURL = 'http://localhost/ci/'


app/Controllers/Pages.php

<?php namespace App\Controllers;

class Pages extends BaseController
{
    public function index()
    {
        return view('index');
    }
    
    
    public function view($page)
    {
        if ( ! is_file(APPPATH.'/Views/pages/'.$page.'.php'))
        {
            // Whoops, we don't have a page for that!
            throw new \CodeIgniter\Exceptions\PageNotFoundException($page);
        }

        $data['title'] = ucfirst($page); // Capitalize the first letter

        echo view('templates/header', $data);
        echo view('pages/'.$page, $data);
        echo view('templates/footer', $data);
    }

    //--------------------------------------------------------------------

}

app/Views/templates/header.php

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo base_url('public/css/style.css'); ?>" type="text/css" media="all" />
</head>

Hope there's someone here who can help me out on this issue. Thanks in advance.

CodeIgniter 4 uses htaccess file, to server the public content from the public folder. So the content such as css should be inside that particular folder. Lets say you have style.css file for serving css. Than it should be in public -> css -> style.css. And in your code you can use base_url/css/style.css to refer to your file. — Dhaval Chheda
– Dhaval Chheda, Commented Jul 13, 2020 at 13:09
@Dhaval Chheda thank you for your help. I have tried that too but it's still showing the same thing. I tried putting them in public folder instead of assets, it's not working too and I don't know what is wrong. — Dr3am3rz
– Dr3am3rz, Commented Jul 13, 2020 at 13:11
Can you update the answer when you put files in the public folder and also include the code on how you are refering to those files ? — Dhaval Chheda
– Dhaval Chheda, Commented Jul 13, 2020 at 13:15
@Dhaval Chheda I have updated my questions already. Not sure whether is that ok. I have also included the base_url setting from my .env file. For the header, I even tried using the exact location instead of using base_url but the problem still persist. — Dr3am3rz
– Dr3am3rz, Commented Jul 13, 2020 at 13:24
echo base_url('localhost/ci/assets/css/style.css'); This seems to be the issue I would say. Most probably it will append localhost/ci Try out with a relative path. Also, you don't have assets folder. So remove the asset. Just use src='/css/style.css' (if you dont have assets folder in public) — Dhaval Chheda
– Dhaval Chheda, Commented Jul 13, 2020 at 13:38

nadim achmad · Accepted Answer · 2020-07-19 05:09:53Z

0

because in your .env app.baseURL = 'http://localhost/ci' if u echo base_url() it will return http://localhost/ci as well so it assume that your public folder have CI folder inside that

if you still want to use your current folder structure

    <link rel="stylesheet" href="http://localhost/css/style.css" type="text/css" media="all" />

in your public folder structur there is no ci/assets folder so just put your style.css folder under ci/assets/css

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

edited Jul 19, 2020 at 5:09

answered Jul 19, 2020 at 4:17

nadim achmad

964 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TimBrownlaw Over a year ago

You are missing a trailing / on app.baseURL which will cause cause your base_url('assets/css/style.css') to not work so well.

Dr3am3rz Over a year ago

@nadim thanks for your help! But I tried all ways I can think of, it's still not working. Even I tried to access the file by entering localhost/ci/public/css/style.css in the browser, it still returns me file not found error.

Sini · Accepted Answer · 2023-05-03 17:44:15Z

0

you don't need to mention public folder
you can make one assets folder in public folder and put your css and js file there
path will be base_url('assets/css/style.css')

edited May 3, 2023 at 17:44

answered May 3, 2023 at 17:42

Sini

11 bronze badge

Collectives™ on Stack Overflow

Codeigniter 4 embedding CSS and JS file

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related