CodeIgniter-JS 및 CSS 추가

CodeIgniter에서 JavaScript 및 CSS (Cascading Style Sheet) 파일을 추가하는 것은 매우 간단합니다. 그림과 같이 루트 디렉터리에 JS 및 CSS 폴더를 만들고 JS 폴더에있는 모든 .js 파일과 CSS 폴더에있는 .css 파일을 복사해야합니다.

예를 들어 하나의 JavaScript 파일을 만들었다 고 가정 해 보겠습니다. sample.js 그리고 하나의 CSS 파일 style.css. 이제 이러한 파일을 뷰에 추가하려면 아래와 같이 컨트롤러에서 URL 도우미를로드합니다.

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

컨트롤러에서 URL 헬퍼를로드 한 후보기 파일에 아래 주어진 줄을 추가하면 아래와 같이 view에 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