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 :

  1. Download CodeIgniter from there website and extract them in your local server.
  2. Now create css and js folder in your project root directory.
  3. Copy your .css file in CSS folder and copy .js file in JS folder.
  4. 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.