How to load javascript css files in codeigniter ci - php

Question

i wanna migrate my website into CI.
i just simply modified from ci sample file welcome.php
in index() function , i load the view to show.
however , i put many javascripts and css files in the header file .
and call it by $this->load->view('header');
but i can not load the javascript files correctly!
Can anyone give me some tips ? it;s hard to configure how to set the correct path.
<script type="text/javascript" src="/assets/javascripts/order.js"></script>
<script type="text/javascript" src="../assets/javascripts/order.js"></script>
<script type="text/javascript" src="../../assets/javascripts/order.js"></script>
my controller code as following
class Welcome extends CI_Controller {
public function index()
{
$this->load->helper('url');
$this->base = $this->config->item('base_url');
$this->load->view('header');
$this->load->view('welcome_message');
}
}
belows are my folder structure

Answer 1

put your assets folder with applications, system, assets
not in application and simple load the url helper class in controller where you call the header view part something like
$this->load->helper('url');
$this->load->view('header');
and simply use something like this in your header file..
because $this->base_url() return the / folder..
<script src="<?php echo $this->base_url();?>assets/javascript/jquery.js"></script>
Changing the folder structure because access within the application folder is just for the core part that i know..
here is the link if you want to know more about URL Helper

Answer 2

This is the best way with minimal code
<script src="<?php echo base_url('assets/javascript/jquery.js');?>"></script>
<script src="<?php echo base_url('assets/css/bootstrap.min.js');?>"></script>

Answer 3

Jogesh_p's answer will surely solve the assets loading problem you have. I would like to follow up on this question you gave
Thank you or your support. btw the way if i wanna use some library
like phpMailler or zend framwork .
You can put in application/libraries/
Then load it in the controller using the Library's Class' Name
$this->load->library('phpmailer');
Its your choice to load in on the constructor or on the individual method.
Good Luck!

Answer 4

To solve my problem I created helper functions to load assets. And here is my code deployed in my application.
PS: First I planned a good/flexible directory structure
[some_helper.php]
/*
* Created: 2017/12/14 00:28:30
* Updated: 2017/12/14 00:28:39
* #params
* $url_structure = 'assets/js/%s.js'
* $files = ['main.min', 'social']
* $echo = FALSE
*
*/
function load_js($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
$html = "";
foreach ($files as $file) {
if($url_structure){
$file = sprintf($url_structure, $file);
}
$file_url = base_url($file);
$html .= "<script src=\"{$file_url}?v={$version}\"></script>";
}
if($echo) {
echo $html;
}
return $html;
}
/*
* Created: 2017/12/14 00:28:48
* Updated: 2017/12/14 00:28:51
* #params
* $version = '1.0' // Later load from configuration
* $url_structure = 'assets/js/%s.css'
* $files = ['main.min', 'social']
* $echo = FALSE
*
*/
function load_css($files = [], $url_structure = NULL, $version = '1.0', $echo = FALSE){
$html = "";
foreach ($files as $file) {
if($url_structure){
$file = sprintf($url_structure, $file);
}
$file_url = base_url($file);
echo "<link rel=\"stylesheet\" href=\"{$file_url}?v={$version}\">";
}
if($echo) {
echo $html;
}
return $html;
}
Then called in the view
[some_view.php]
$css = [
'path' => 'assets/css/%s.css',
'files' => ['bootstrap.min','style']
];
load_css($css['files'], $css['path'], '1.0', TRUE);
Hope it helps someone.
In the case of OP $css['path'] = 'application/assets/css/%s.css'; will do the trick.
Updated the code on Github which I will keep updating.

Answer 5

assets/css/bootstrap.min.css"
<!-- Include JS -->
<script src="<?php echo base_url();?>assets/js/jquery.js"></script>
<script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>

Answer 6

function addcategory()
{
//alert("<?php echo base_url();?>")
$.ajax({
complete: function() {}, //Hide spinner
url : '<?php echo base_url();?>category/search',
data:$('#add_category').serialize(),
type : "POST",
dataType : 'json',
success : function(data) {
if(data.code == "200")
{
alert("category added successfully");
}
},
beforeSend: function(XMLHttpRequest){}, //$.blockUI();
cache: false,
error : function(data) {
}
});
}