CodeIgniter use Model-View-Controller (MVC) architecture which work on three-tier architecture all the layers is separate. In CodeIgniter it is recommended that .css and .js file should be placed in CSS and JS folder.
In this tutorial we are going to explain how we can use external css and js in CodeIgniter.
To integrate external css and js file in CodeIgniter, do following steps :
- Download CodeIgniter from there website and extract them in your local server.
- Now create css and js folder in your project root directory.
- Copy your .css file in CSS folder and copy .js file in JS folder.
- For base_url() function you must load URL helper in your controller’s constructor
//Loading url helper
$this->load->helper('url');
Now you can use base_url() function in view
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<script type='text/javascript' src="<?php echo base_url(); ?>js/jquery.min.js"></script>
Note : base_url() function print your project base url .In view source it will make complete url.
http://www.aorank.com/tutorial/codeigniter_css_and_js/css/style.css
http://www.aorank.com/tutorial/codeigniter_css_and_js/js/jquery.min.js
You can also refer our live demo or download the Script file. Extract the downloaded files, save it in your local server and run it using given path
http://localhost/codeigniter_css_and_js/index.php/css_js_load
Tutorial Scripts in detail
Below are the details of the code used in this tutorial with proper explanation.
Controller File : css_js_load.php
In controller just load Url helper in constructor and index function load view where external css and js will use.
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
class Css_js_load extends CI_Controller {
function __construct() {
parent::__construct();
// Load url helper
$this->load->helper('url');
}
public function index() {
// View "css_js_view" Page.
$this->load->view('css_js_view');
}
}
?>
View File: css_js_view.php
In view, loading CSS and js using link and script tag
<html>
<head>
<title>Load css and javascript file in codeigniter</title>
<!--Load style.css file, which store in css folder.-->
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/style.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<!--Load jquery.min.js file, which store in js folder.-->
<script type='text/javascript' src="<?php echo base_url(); ?>js/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="css">
<p>This div is shown by style.css file, which you will found in your project's root css folder.</p>
</div>
<div class ="js">
<p>This div is perform by script.js and jquery.min.js file, which you will found in your project's root js folder.</p></div>
<button type="button" class="fg-button teal" id="click">Click For Javascript</button>
</div>
<div id="formget_ad">
<a href="https://www.formget.com/app/"><img id="fugo" src="<?php echo base_url(); ?>images/formGetadv-1.jpg" /></a>
</div>
<!--Load script.js file, which store in js folder.-->
<script type='text/javascript' src="<?php echo base_url(); ?>js/script.js"></script>
</body>
</html>
CSS File : style.css
Styling HTML Elements.
body {
font-family: 'Raleway', sans-serif;
}
.main{
margin:0,auto;
}
.css {
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-top: 8%;
margin-left: 10%;
}
.js {
display:none;
position: absolute;
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid black;
margin-left: 38%;
margin-top: 8%;
}
button#click {
margin-left: 45%;
margin-top: 22%;
}
.fg-button{
position: relative;
top: 0;
border-radius: 4;
font-size: 18px;
padding: 8px 28px;
text-decoration: none;
border: 0px solid;
cursor: pointer;
border-bottom-width: 3px;
outline: none;
-webkit-transition: 0.3s background;
-moz-transition: 0.3s background;
transition: 0.3s background;
}
.fg-button:active{
top: 2px;
}
.fg-button.teal{
color: #fff;
border-color: #04A5A1;
background-color: #08BBB7;
}
.fg-button.teal:hover{
background: #0ACFCB;
}
Javascript File : script.js
Javascript file where jQuery toggle function used in on click event.
$('#click').click(function()
{
$('div.js').toggle(1000);
});
Conclusion:
This was all about how we can use external CSS and js file in CodeIgniter. Hope you like it, keep reading our other blogs.
5 Replies to “CodeIgniter : Loading CSS and Javascript File”
Thank you for this , i have done setting first template in CodeIgniter
Very soon this web site will be famous amid all blogging and
site-building visitors, due to it’s nice content
Hi,
Thanks for your compliment.
keep reading and enjoy our blogs.
Regards,
Formget Team
Thanks for this tutorial.i’m new to codeigniter.
But how do you dynamicly add js and css files?
I’ve found this tutorial, but it doesn’t work for me (http://dondanu.com/add-dynamic-css-and-js-in-codeigniter/ )
(I had to make changes into that code. Because it setups js twice. For css it’s:
if ( ! function_exists(‘queue_css’))
{
function queue_css($file, $media=’all’)
{
if(!empty($file)){
foreach($file as $e) {
$element = ”.”\n”;
echo $element;
}
}
}
}
Then I had an error about undefined $atts and I added “$atts = array()” into “function queue_css($file, $media=’all’)”.
added that helper into autoload.
My baseurl is
$config[‘base_url’] = ‘http://localhost/public_html’;
and css folder is in public_html. In my config.php I wrote
$config[‘css_path’] = ‘styles/’;
But still browser doesn’t see my css files.
Maybe you could post something about dynamicly adding css and js. That would be great! I can’t find anything worth on the internet.