Use Images, CSS and JavaScript in CodeIgniter Framework

Create new folder named assets in root project. In this folder, create new folders as below:

Create new folder named images in assets folder. Copy images need to use in project to images folder.

Create new folder named css in assets folder. In this folder, create new css file named style.css as below:

.format-text {
	color: red;
	font-size: 20px;
}

img {
	width: 120px;
	height: 100px;
}

Create new folder named js in assets folder. In this folder, create new javascript file named mylib.js as below:

function clickMe() {
	alert('Hello World');
}

In CodeIgniter Project, Open autoload.php file in config folder. Add url helper to helper config as below:

$autoload['helper'] = array('url');

In CodeIgniter Project, Open config.php file in config folder. Set value for base_url config as below:

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

Create new PHP file named demo.php in controllers folder as below:

<?php defined('BASEPATH') OR exit('No direct script access allowed');

class Demo extends CI_Controller {

	public function index()
	{
		$this->load->view('demo/index');
	}
}

In CodeIgniter Project, Open routes.php file in config folder. Set value for default_controller as below:

$route['default_controller'] = 'demo';

Create new folder named demo in views folder. In this folder, create new PHP file named index.php as below:

<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>
<html>
	<head>
		<title>Demo Page</title>
		<link href="<?php echo base_url(); ?>/assets/css/style.css" rel="stylesheet" type="text/css">
		<script src="<?php echo base_url(); ?>/assets/js/mylib.js" type="text/javascript"></script>
	</head>
	<body>

		<h3 class="format-text">Demo Page</h3>
        <img src="<?php echo base_url(); ?>/assets/images/thumb1.gif" onclick="clickMe()">

	</body>
</html>

Access index action in Demo controller with following url: http://localhost:9092/LearnCodeIgniterWithRealApps/demo/index

Output

I recommend you refer to the books below to learn more about the knowledge in this article:

Use Images, CSS and JavaScript in CodeIgniter Framework

Create Assets Folder

Images Folder

CSS Folder

JS Folder

AutoLoad Helpers

Set BASE URL

Create Controller

Set Default Controller

Create View

Structure of CodeIgniter Project

Run Application

References