CodeIgniter - Ajout de JS et CSS

L'ajout de fichiers JavaScript et CSS (feuille de style en cascade) dans CodeIgniter est très simple. Vous devez créer un dossier JS et CSS dans le répertoire racine et copier tous les fichiers .js dans le dossier JS et les fichiers .css dans le dossier CSS comme indiqué sur la figure.

Par exemple, supposons que vous ayez créé un fichier JavaScript sample.js et un fichier CSS style.css. Maintenant, pour ajouter ces fichiers dans vos vues, chargez l'assistant d'URL dans votre contrôleur comme indiqué ci-dessous.

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

Après avoir chargé l'assistant d'URL dans le contrôleur, ajoutez simplement les lignes ci-dessous dans le fichier de vue, pour charger le fichier sample.js et style.css dans la vue comme indiqué ci-dessous.

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

Exemple

Créez un contrôleur appelé Test.php et enregistrez-le dans application/controller/Test.php

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

Créez un fichier de vue appelé test.php et enregistrez-le à 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>

Créez un fichier CSS appelé style.css et enregistrez-le à css/style.css

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

Créez un fichier JS appelé sample.js et enregistrez-le à js/sample.js

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

Changer la routes.php déposer dans application/config/routes.php pour ajouter une route pour le contrôleur ci-dessus et ajouter la ligne suivante à la fin du fichier.

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

Utilisez l'URL suivante dans le navigateur pour exécuter l'exemple ci-dessus.

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