CodeIgniter - Menambahkan JS & CSS

Menambahkan file JavaScript dan CSS (Cascading Style Sheet) di CodeIgniter sangat sederhana. Anda harus membuat folder JS dan CSS di direktori root dan menyalin semua file .js di folder JS dan file .css di folder CSS seperti yang ditunjukkan pada gambar.

Misalnya, mari kita asumsikan, Anda telah membuat satu file JavaScript sample.js dan satu file CSS style.css. Sekarang, untuk menambahkan file-file ini ke tampilan Anda, muat URL helper di controller Anda seperti yang ditunjukkan di bawah ini.

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

Setelah memuat URL helper di controller, cukup tambahkan baris yang diberikan di bawah ini dalam file view, untuk memuat file sample.js dan style.css dalam tampilan seperti yang ditunjukkan di bawah ini.

<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>

Contoh

Buat pengontrol bernama Test.php dan simpan di application/controller/Test.php

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

Buat file tampilan bernama test.php dan simpan di 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>

Buat file CSS bernama style.css dan simpan di css/style.css

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

Buat file JS bernama sample.js dan simpan di js/sample.js

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

Mengubah routes.php mengajukan application/config/routes.php untuk menambahkan rute untuk pengontrol di atas dan menambahkan baris berikut di akhir file.

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

Gunakan URL berikut di browser untuk menjalankan contoh di atas.

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

CodeIgniter - Menambahkan JS &amp; CSS

Contoh

CodeIgniter - Menambahkan JS & CSS