Use Images, CSS and JavaScript in CodeIgniter Framework


Use Images, CSS and JavaScript in CodeIgniter Framework


Create new folder named assets in root project. In this folder, create new folder as below:

Images Folder
Create new folder named images in assets folder. Copy images need to use in project to images folder.

CSS Folder
Create new folder named CSS in assets folder. In this folder, create new CSS file named style.css as below:

.format-text{
    Color: red;
    font-size: 20px;
}

img{
    width: 120px;
    height: 100px;
}

JS Folder
Create new folder named JS in assets folder. In this folder, create new JavaScript file named mylib.js as below:

function clickMe(){
   alert(‘Hello World !’);
}

AutoLoad Helpers
Open autoload.php file in config folder. Add URL helper to helper config as below:

$autoload[‘helper’] = array(‘url’);

Set Base URL
Open config.php file in config folder. Set value for base_url config as below:

$config[‘base_url’] = ‘http://localhost:9092/LearnCodeIgniterWithRealApps’;

Create Controller
Create new PHP file named demo.php in controllers folders as below:

<?php defined(‘BASEPATH’) OR exit(‘No direct script access allowed’);
Class Demo extends CI_Controller{
    Public function index(){
        $this->load->view(‘demo/index’);
    }
}
?>

Set Default Controller
Open routes.php file in config folder. Set value for default_controller as below:

$route[‘default_controller’] = ‘demo’;

Create View
Create new folder named demo in views folder. In this folder, create new PHP file named index.php as below:

<?php defined(‘BASEPATH’) or exit(‘No direct script access allowed’); ?>
<html>
    <head>
        <title> Demo Page </title>
        <link href=”<?php echo base_url(); ?>/assets/css/style.css” rel=”stylesheet”     type=”text/css”>
       <script src=”<?php echo base_url(); ?>/assets/js/mylib.js” type=”text/javascript”></script>
    </head>
<body>

    <h3 class=”format-text”> Demo Page </h3>
    <img src=”<?php echo base_url(); ?>/assets/images/thumb1.gif” onclick=”clickMe()”>

</body>
</html>

Rau Application


Post a Comment

0 Comments