CodeIgniter-JSとCSSの追加

CodeIgniterでのJavaScriptおよびCSS（カスケードスタイルシート）ファイルの追加は非常に簡単です。図に示すように、ルートディレクトリにJSおよびCSSフォルダーを作成し、JSフォルダーにあるすべての.jsファイルとCSSフォルダーにある.cssファイルをコピーする必要があります。

JSとCSSの追加

たとえば、1つのJavaScriptファイル 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>

*style.css* というCSSファイルを作成し、 *css/style.css* に保存します

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

*sample.js* というJSファイルを作成し、 *js/sample.js* に保存します

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

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

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

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

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

Codeigniter-adding-js-css

CodeIgniter-JSとCSSの追加

例