How To Load Web Page Assets With Codeigniter Base_url Tutorial

Codeigniter tutorial

How To Load Web Page assets With Codeigniter Base_url Tutorial

  In this tutorial we will learn how to load
  1. Images with codeigniter
  2. Javascripts with codeigniter
  3. CSS with codeigniter
  4. Base URL with codeigniter (URL of your codeigniter installation)
    In PHP we use to load our css, javascript, other assets with normal html declarations and we had no issues if the url is defined correctly. But in codeigniter you cannot put any of your asset files like images, css, javascript inside your views directory and also your website does not navigate the way you might have used earlier, in codeigniter knowing how to generate URL for any of your asset or link is very important.   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 Codeigniter Base URL Codeigniter base_url() 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()

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 Your 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.
  • Codeigniter
    • assets
      • js
      • css
      • img
Once done download the sample zip file attached below with assets place the files in their desired places. Sample 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"> This img tag says to load a image named img.jpg which is inside the img directory under assets directory and base URL is printed with the function base_url(). In total it generates a complete URL i.e. http://localhost/assets/img/img.jpg , so the image gets a complete URL and loads accurately. Reload your home controller URL you must see the image. Now we will add javascript to our view.   Adding javascript to codeigniter view Now again open the header.php inside your views directory and between the opening and ending of your head tag add the following line. <script type="text/javascript" src="<?php echo base_url()?>assets/js/script.js"></script> The above script tag says your page to load a javascript whose source is located at <?php echo base_url()?>assets/js/script.js and till now you know what base_url() function holds, it prints the base URL you configured for codeigniter. Then it searches the script.js inside js directory which is under assets directory. Once you have added the line save header.php and reload. Adding assets to codeigniter views output You must see a alert prompt when your page loads and output like the image attached above. This means you have done it correctly and now you know how to add images, css, javascript and URLs to your codeigniter view. Congratulations.   In next chapter we will learn about models. Codeigniter Tutorial To Create And Load Model For Beginners



Please enter your comment!
Please enter your name here