Codeigniter load CSS and Javascript files - Mostlikers

09 April, 2015

Codeigniter load CSS and Javascript files

In this post i have explan about how we can use external css and javascriptin CodeIgniter. Recently i have posted Convert html to codeigniter and basic steps of codeigniter. For beginner this one the best helpful guide. Just follow that tutorial after start to integrate css and js in CodeIgniter file.

Loading CSS and Javascript File in codeigniter

To integrate css and js follow below steps :
     
    --> Download codeIgniter file and extract to your local system (or)  refer this tutorial. codeIgniter basic
    --> Create new folder in your codeIgniter project folder.
                 Ex: htdocs --> projectfolder --> assets
    --> After creating assets folder inside the folder create css and jss folder.
                 Ex: htdocs --> projectfolder --> assets --> css
                 Ex: htdocs --> projectfolder --> assets --> js
    --> Copy your css and javascript files in css and js folder.
    --> For base_url() function you must load URL helper in your controller’s constructor.
                  

$this->load->helper('url');
(or)
--> Set autoload libraries file config folder it will load automatically.
                 File location : Application --> config-->autoload.php
   --> Now you can include your css and javascript code in design file.
  
<link href="<?php echo base_url()?>assets/css/bootstrap.min.css" type="text/css">
<script src="<?php echo base_url()?>assets/js/jquery.min.js"></script>

I hope this tutorial helpful for you. thank you for visiting. keep in touch with us.

"Start by doing what's necessary; then do what's possible;
    and suddenly you are doing the impossible."
             - Francis of Assisi




                                                           

2 comments:

  1. Hi,I am designing audio player using jPlayer with code igniter.It works fine separately but when i put it inside the code igniter controller then it is not working where java scripts file are in assets/js folder.
    please help!!

    ReplyDelete