How to add CSS and JS files in codeigniter 4

add css and js files in codeigniter-4

Working on Codeigniter 4 is very easy because of the flexibility, Codeigniter introduced a lot of new things in Codeigniter 4 version like modeling Data, Testing, Command line usage, Built-in pagination, View Renderer, View Layouts, Localization, View Cells and  Public directory to store CSS and JS files.

In Codeigniter 3 we always keep our CSS files in separate folders i.e assets/CSS OR assets/js, but Codeigniter 4 is providing now the public folder where you can keep your all images, CSS, js and other files. So now you need to create your CSS and js folder and keep the files in those folders. Download the Codeigniter 4 version from the official website of Codeigniter 4

Now create a folder named CSS in public directory, and now create a style.css fine and keep this file in the same folder which you have just created, Now create a js folder in public directory and once again create a custom.js file and keep the file in the same directory which you have just created.

css folder in public direcotry in codeigniter 4

Now create a controller name Home, and after that create a view named home and make sure keep the controller folder in the app/controllers folder and also the view file in the app/view folder.

home controller and home view

Now add this code in the view which you have just created, i consider you have already set the base_url=”your Project Name”

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport”
content=”width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Add css and js files in codeigniter 4</title>
<link rel=”stylesheet” type=”text/css” href=”<?php echo base_url(‘css/style.css’); ?>”>
</head>
<body>
<h1>How to add css and js files in codeigniter 4</h1>
<script type=”text/javascript” src=”<?php echo base_url(‘js/custom.js’); ?>”></script>
</body>
</html>

Now access the home controller.

 

access the home controller

 

Add some CSS and js code in your CSS and js files, I am adding this code in custom.js file alert(‘working..’); and styling in style.css file h1{color: olive;}

 

checking css and js code

 

The console section is clear because everything is working fine, but if you give the wrong folder name or the fileName your browser always shows the error in the console section, now I am using the wrong fileNames for CSS and js  “styleeee.css” and this fileName as js customdfdfdf.js and definitely your browser will give you the error.

 

stynax error

shakzee
administrator
First, let me first introduce myself. My Name is Shehzad Ahmed and I am a full-time developer with over 7+ years of experience. In that time, I’ve worked as a developer with many big and small firms and was teaching web design and development skills to many keen learners and by the time passes I’ve found a great passion and potential on myself as a teacher on this particular field and now I am a full-time teacher and working as a freelancer. Web design and development constantly developing every day with new trends, ideas, and innovations. That’s why nowadays you need to learn and keep yourself up-to-date with everything daily and that’s what I do and that is something that I love because I am so passionate about it! When I have spare time I use to give time to my web development community. Teaching kids, managing online programming groups, attending a conference and making blogs, I like keeping myself up-to-date and engaged in my field always. I have my expertise in (PHP, Codeigniter, Laravel, Bootstrap, WordPress, SQL, Query Optimization, Data Science and Design Patterns). Anyone who wants to learn and know anything about web development and design I am always available for that and would love to help out. I always love to be looking out for new things and that is why I spend a lot of my time learning new techniques and helping other people learn web development and design through various groups and web development tutorials as well as online courses.

Comments

  • Marc
    August 22, 2019

    Hi,
    I’ve tried your code with CodeIgniter version 4.0.0-beta.4 and it doesn’t work.
    a) base_url() complains when using ‘ ‘ and wants ” ” for argument;
    b) what I try as path even the simplest “/css/style.css” which mimicks the icon call of the welcome message, nothing is loaded!!!
    I really do not understand what can happen!
    Regards,
    Marc

Leave a Reply

Your email address will not be published. Required fields are marked *

WhatsApp chat