How To Load Web Page assets With Codeigniter Base_url Tutorial
In this tutorial we will learn how to load
- Images with codeigniter
- CSS with codeigniter
- Base URL with codeigniter (URL of your codeigniter installation)
Now we will see how to put our asset in codeigniter and call them when needed so they display or function properly. For this tutorial we will need the files from previous chapter. If you don’t have the view files then refer to the previous chapter and download the sample files.
Template views with Codeigniter (Breaking down html in parts) Tutorial
Base URL is the function in codeigniter used to denote the installation URL of codeigniter i.e. the directory where your codeigniter files exist. It is very important that you configure the base url in every installation or every project of codeigniter.
Configuring codeigniter Base_URL()
Go to your codeigniter directory, open the application directory then the config directory. On line no 26 of config.php there is an array variable $config[‘base_url’] find that and configure it with your codeigniter root installation directory URL. See example below
$config[‘base_url’] = ‘http://localhost/codeigniter/’;
Now open autoload.php inside the same directory on line no 92 you will find an array variable $autoload[‘helper’] set its value to url as shown below.
$autoload[‘helper’] = array(‘url’);
This says codeigniter to load the url helper automatically when application is loaded. Once you are done save and close config.php and now we will create a proper navigation.
Creating navigation in codeigniter with Base_URL()
In a navigation system we need the url of every page created for our application. URL can be generated manually, but when we are creating a dynamic application it is not a good idea to create URLs manually rather use the base_url() function to get the base URL or root URL of our codeigniter installation and then append it with our function and arguments as needed.
Open navigation.php inside views directory, currently you can see all our URL’s are directing to same address, for now as we are having only one view we will keep it that way and modify the url so it becomes dynamic. For this we will echo the output of base_url() function and append that with our function. So change all href values to “<?php echo base_url()?>index.php/home” and save navigation.php for reference check example below.
<a href=”<?php echo base_url()?>index.php/home”>
After you are done reload the page, if you have done everything accurately then you will see the same page with same urls as before and same navigation. Now we will see how to add styles and scripts to our codeigniter views.
Adding assets to codeigniter views
Adding assets to codeigniter views is a bit tricky. Let us create a directory inside the codeigniter installation root directory, name it assets. Inside the assets directory create 3 more directories named “js”, “css”, “img” the structure will be as given below.
Once done download the sample zip file attached below with assets place the files in their desired places.
Script.js inside the js directory
Style.css inside css directory
Img.jpg inside the img directory
Now let us start adding our assets to our view file.
Adding CSS to codeigniter view
Open the header.php inside views directory of your codeigniter installation, between the opening and closing tags of head in header.php add the style.css as given below, I will explain it once you completed adding.
<link href=”<?php echo base_url() ?>assets/css/style.css” rel=”stylesheet” type=”text/css”>
The base_url() function prints the URL you added in config.php as base URL of your codeigniter installation then we have assets directory and then the css directory and then it links to style.css hence completes the link. Now reload your page, you will see the style is changed for navigation bar. Now let us move ahead and start adding a sample banner image.
Adding images to codeigniter view
Now let us add an image to our view, it is not looking that good without an image in it, so open home.php inside the views directory of your codeigniter installation add the following line inside the div opening clause above every content of div and save it.
<img src=”<?php echo base_url()?>assets/img/img.jpg” alt=”sample image”>
Now again open the header.php inside your views directory and between the opening and ending of your head tag add the following line.
In next chapter we will learn about models.
Codeigniter Tutorial To Create And Load Model For Beginners