CodeIgniter - Añadiendo JS y CSS

Agregar archivos de JavaScript y CSS (hoja de estilo en cascada) en CodeIgniter es muy simple. Debe crear la carpeta JS y CSS en el directorio raíz y copiar todos los archivos .js en la carpeta JS y los archivos .css en la carpeta CSS como se muestra en la figura.

Por ejemplo, supongamos que ha creado un archivo JavaScript sample.js y un archivo CSS style.css. Ahora, para agregar estos archivos a sus vistas, cargue URL helper en su controlador como se muestra a continuación.

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

Después de cargar el asistente de URL en el controlador, simplemente agregue las siguientes líneas en el archivo de vista, para cargar el archivo sample.js y style.css en la vista como se muestra a continuación.

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

Ejemplo

Crea un controlador llamado Test.php y guárdalo en application/controller/Test.php

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

Crea un archivo de vista llamado test.php y guárdalo en 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>

Crea un archivo CSS llamado style.css y guárdalo en css/style.css

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

Crea un archivo JS llamado sample.js y guárdalo en js/sample.js

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

Cambiar el routes.php presentar en application/config/routes.php para agregar una ruta para el controlador anterior y agregar la siguiente línea al final del archivo.

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

Utilice la siguiente URL en el navegador para ejecutar el ejemplo anterior.

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

↰ Previous page Next page ↱