CodeIgniter-JSとCSSの追加

CodeIgniterにJavaScriptとCSS(Cascading Style Sheet)ファイルを追加するのはとても簡単です。図に示すように、ルートディレクトリにJSおよびCSSフォルダーを作成し、JSフォルダー内のすべての.jsファイルとCSSフォルダー内の.cssファイルをコピーする必要があります。

たとえば、JavaScriptファイルを1つ作成したとします。 sample.js および1つのCSSファイル style.css。次に、これらのファイルをビューに追加するには、以下に示すように、コントローラーにURLヘルパーをロードします。

$this->load->helper('url');

コントローラにURLヘルパーをロードした後、ビューファイルに以下の行を追加するだけで、以下に示すように、ビューにsample.jsファイルとstyle.cssファイルがロードされます。

<link rel = "stylesheet" type = "text/css" 
   href = "<?php echo base_url(); ?>css/style.css">

<script type = 'text/javascript' src = "<?php echo base_url(); 
   ?>js/sample.js"></script>

と呼ばれるコントローラーを作成します Test.php に保存します application/controller/Test.php

<?php 
   class Test extends CI_Controller {
	
      public function index() { 
         $this->load->helper('url'); 
         $this->load->view('test'); 
      } 
   } 
?>

と呼ばれるビューファイルを作成します test.php で保存します application/views/test.php

<!DOCTYPE html> 
<html lang = "en">
 
   <head> 
      <meta charset = "utf-8"> 
      <title>CodeIgniter View Example</title> 
      <link rel = "stylesheet" type = "text/css" 
         href = "<?php echo base_url(); ?>css/style.css"> 
      <script type = 'text/javascript' src = "<?php echo base_url(); 
         ?>js/sample.js"></script> 
   </head>
	
   <body> 
      <a href = 'javascript:test()'>Click Here</a> to execute the javascript function. 
   </body>
	
</html>

と呼ばれるCSSファイルを作成します style.css で保存します css/style.css

body { 
   background:#000; 
   color:#FFF; 
}

と呼ばれるJSファイルを作成します sample.js で保存します js/sample.js

function test() { 
   alert('test'); 
}

変更 routes.php ファイルに application/config/routes.php 上記のコントローラーのルートを追加し、ファイルの最後に次の行を追加します。

$route['profiler'] = "Profiler_controller"; 
$route['profiler/disable'] = "Profiler_controller/disable"

上記の例を実行するには、ブラウザで次のURLを使用します。

http://yoursite.com/index.php/test