Where and how do I include .js files in Views in CodeIgniter?
I have tried this:
<script type="text/javascript" src="system/application/libraries/jquery.js"></script>
As I figured that the index.php is the one that is loading the views, so I'm guessing that every time a page is loaded the current dir path is at root because index.php is located at root. Is this true?
The above line doesn't so I am doing something wrong. I have a CodeIgniter project. The path is like this:
localhost/CodeIgniter/system/application
so which path should I use to include my jquery.js file which is located in
localhost/CodeIgniter/system/application/libraries
when I want to load the jquery.js file in a View located here:
localhost/codeIgniter/system/application/views/till_view.php
There is a lesser-known solution that works really well with clean syntax and much more portability than hard-coding URL's or relative files.
<base href="<?=base_url();?>">
<img src="images/logo.gif" alt="Logo" />
Read more about how, what, why on my article "Asset handling in CodeIgniter with the BASE tag".
It's not the "index.php" file that is the view. The view is whatever is loaded in your controller when you do a
$this->load->view("viewname");
The file "viewname.php" can then include the .js files, just as a normal .html (or .php) file would:
<script src="/url/to/javascript.js" />
You may want to create a default view or a "header" view that includes some or all of the (common) .js files for your project.
-CF
First question:
It depends if you use absolute or relative urls.
Absolute urls go from the root of your domain. Relative urls are loaded relative from the current directory (including the url segments).
Second question:
It's best to use an absolute URL. Because of the pretty urls, it's not recommended to use relative urls.
The easiest way is to use the url helper and then use the site url function like this:
$this->load->helper('url');
echo site_url('system/application/libraries/jquery.js');
Ps. I recommend to put things like javascript and images outside of the CodeIgniter directory.
base_url() always works fine for me
Here is a solution specifically relevant to the OP which I didn't think anyone else provided.
<script type="text/javascript" src="<?= base_url() ?>libraries/jquery.js"></script>
So, base_url() will provide a path direct to the root of your site.
<script type="text/javascript" src="<?php base_url() ?>libraries/jquery.js"></script>
base_url() will provide the url of the site
The easiest way you can directly access the file:
<img src="http://localhost/ci/you_dir/your_img/your_image.png" />
where ci is for codeigniter.
Related
I will have multiple folders/modules to access common files. But accessing them seems to be big deal for me!
I did gone through this link to understand the relative positioning and managed to solve some . But not all. Reference: Relative URL's/paths in php
My folder structure is as below:
Website runs on root folder:
/(index|ajax).php
and then the subfolders:
/css/style.css
/img/*.(jpg|png|gif)
/inc/(header|footer).php
/js/*.js
/registration/(ajax|getsubjects|response|success).php
Now, this is how I included files in the index.php page(this displays correctly, meaning, style,css,js,config all accessible)
<?php
include('inc/header.php');
?>
content here
<?php
include('inc/footer.php');
?>
This index page will have to fetch getsubjects.php, response.php and then finally land in success.php.
The success.php need some styling whereas the previous two were only for processing.
So now in the success.php I access header and footer as below:
include('../inc/header.php');
include('../inc/footer.php');
But this doesn't apply any styling!
inside header.php and footer I include files like this:
<link rel="stylesheet" href="./css/style.css">
<script src="./js/script.js"></script>
How should I include the files here please?
./css/style.css means from current directory and would achieve the same result as css/style.css. The easiest answer is to determine what the base path of your application is and use that. For instance, if your application is running as http://myapp.com, then you could set all your front-end paths to /css/style.css. If your app runs in a subdirectory, such as http://example.com/myapp, then your paths would be /myapp/css/style.css.
This does not apply the same on the PHP side. For them, you should really use document-relative paths. Having a PHP file that you include in multiple places in your app, the contents of which having something like include('../myDoc.php');, can lead to complications as the path isn't based on the included document's path, but rather the including. So using document-relative paths, you get around this include(__DIR__ . '/../myDoc.php');. Just something to consider if your app grows.
Your PHP-includes seem to be correct. But in your HTML you need to change the linking to the CSS and JS Files (maybe even to your images).
You could use absolute paths:
<link rel="stylesheet" href="/css/style.css">
<script src="/js/script.js"></script>
the leading dot makes your paths relative to the HTML-Document, so if they are linked from a document in a subfolder, they point to a wrong location.
Including files with
<?php
include("page1.php")
?>
put the code (or content) from page1 into the caller page.
So you may have to detect from where your pages are called, or try absolute links (beginning by /)
I hope I answer you question correctly.
I try to resolve my problem with resource path in Php. In file header.php I include scripts and stylesheets, but when I require_once('../templates/header.php'); in file login.php from views directory I get 404 error code on all my resources, because all files must be in subdirectory of views direcroty. How I can solve this problem?
Path:
/var/www/reg/templates/header.php - path to header
/var/www/reg/views/login.php - path to login
/var/www/reg/js/script.js - path to js
/var/www/reg/css/style.css - path to css
according to your file structure
inside header.php
try this way:
<link href="/reg/css/style.css" rel="stylesheet" />
<script src="/reg/js/script.js" ></script>
As I have tested it works for me.
This is how I'd probably do it, not sure if best practice, but similar to the way wordpress works, IE
In your a index file (in the reg/ dir or in a config file if you have one):
define('SITEPATH', dirname(__FILE__).'/');
Then you can require files like this:
require_once(SITEPATH . 'templates/header.php');
Then when you're calling your resource files, you can do something similar this:
<script src="<?php echo SITEPATH; ?>js/script.js"></script>
But, imo, backend stuff shouldn't really be on template files, but because your directories are different to how I'd lay them out.
I know a little bit about relative path. Suppose, I have a project on codeigniter. There are 4 controller such as with function name:
1. Admin->index,profile,add_student,edit_marks,make_admin,
2. Teacher->index,add_marks,update_marks
3. Student->index,view_teacher,view_result
4. Guest->index,view_Student, view_marks,view_result
From these, How can I use them as relative path ?Remind it,some times I go one controller to another controller, such as profile,view_marks is a common function for all, so every one access it.
For images or file can I use relative path ? Then,Suppose I have a image at root folder as
->root_folder/template/images/a.png. How can I use it as relative path ?
Really, I need the core knowledge of relative path with application in codeigniter.
You should use codeigniter constants defined in root/index.php
To get Root path use
FCPATH
It returns
Path upto root folder where your codeigniter is installed.
So in your case , it will be
FCPATH . 'template/images/a.png';
I assume you're looking for path not URL.
At last I have found the answer that is:
It is not necessary to use base_url or site_url every times for link.
All time use:
/controller_name/function_name
Such as for a anchor link on viewing admins's profile code as(I hope, this technique is called relative path). It decrease time to route it.
Admin Profile
What's wrong with using this for the image path?
base_url('path/to/image')
If having senario like
ROOT
|____APPLICATION
|____ASSETS
| |________ CSS
| |________ JS
| |________ IMG
|____SYSTEM
then you can access the css as follows:-
<script type="text/javascript" src="<?php echo base_url();?>assets/css/style.css"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/getinfo.css"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/img/image.png"></script>
The current accepted answer works fine, but it is not relative. For instance: if the website would be replaced from the root to a subdirectory, the url wouldn't work anymore.
More on this same topic I found here: How can I display images with the Codeigniter php framework?
The answer in that topic recommends not working with relative paths, but personally I would like to see this possible within modules (the MX-plugin for CodeIgniter).
So here's a possible way of working with relative paths I found:
<?php $path = base_url(str_replace(FCPATH,"", __DIR__ )).'/'; ?>
Example usage:
<img src="<?php echo $path;?>../assets/img/myImage.png" />
for instance: if the this html would be used in /modules/mymodule/views/someviewfile.php the output will be yourdomain.com/modules/mymodule/assets/img/myImage.png
To give you more context, my file structure look like: includes/overall/footer.php and in this file I am referencing js/nav-header.js note that both includes and js folders are in the base folder. Am I doing this correctly?
includes/overall/footer.php:
<?php include 'includes/footer.php'; ?>
<script type="text/javascript" src="libs/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="libs/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" scr="js/nav-header.js"></script>
</body>
</html>
This file itself is included in another file, does it have something to do with the order in which things are being loaded perhaps? Reason being is that I cannot seem to get anything in the javascript file to fire. Any help would be appreciated.
What dose you nav-header.js contain?
Assets are requested from the server in the order they appear in the html. So nav-header.js will be called after jquery however that doesn't mean it will finish loading before it.
Also to load files use absolute paths:
/js/nav-header.js instead of js/nav-header.js
that way you know the js/nav-header.js will be loaded from the root folder.
if u have code in js/nav-header.js that fires on load(not on document ready) i would sugest moving it to document ready.
I recommend against using hardcoded absolute paths, as that will make the application less portable.
Instead, set a $base_url variable that you can echo in your html
<?php $base_url = "/"; ?>
In your html
<script type="text/javascript" scr="<?php echo $base_url; ?>js/nav-header.js"></script>
You can use this throughout your site for js, css, anchors, etc.
Use the BASE tag in HTML with all relative paths :D
Phil Sturgeon wrote a blog post about its use in CodeIgniter, but essentially you don't need to use a framework to make use of the same principle.
You should store the document root in a variable somewhere in your application and have a function that references it, then echo that out into the base tag. This way when you move your application to a different environment you only have to change the root in one place and you are good to go.
Also, read this before using the base tag.
All these days I thought that CodeIgniter did not allow direct access to file(s) in the application (I mean the application itself and not the application folder).
So, if I have the following structure under the folder, www:
ROOT
|____APPLICATION
|___________JS/mine.js
|___________VIEWS/my_view.php
And if I want to include mine.js in my_view.php, I would need to refer the JS file using the base_url() function as follows:
<script type="text/javascript" src="<?php echo base_url();?>js/mine.js"></script>
Looks like I was wrong, I can refer to it relatively as well. Like:
<script type="text/javascript" src="../js/mine.js"></script>
Any thoughts/opinions?
Which one is a good practice? And why?
It's always a smart idea to use base_url() so if your URL changes, all your links don't break.
base_url() is going to return the full TLD, plus any folders your site is in.
Best practice is to keep your assets out of the application, or any other system folders. Most CodeIgniter sites will structure their assets as follows:
ROOT
|____APPLICATION
|____ASSETS
| |________ CSS
| |________ JS
| |________ IMG
|____SYSTEM
And then referenced like so:
<script type="text/javascript" src="<?php echo base_url('assets/js/mine.js')"></script>
It is always a good idea while using MVC to keep all assets folders (css, js and images) in root directory rather than keeping inside application or any other folder and accessing them using base_url.
<script type="text/javascript" src="<?php echo base_url();?>js/mine.js"></script>
So I think above line you mentioned is the proper way.