Ajouter dynamiquement des liens JS et CSS dans la balise head de votre site

Ajouter des liens vers des fichiers JS et/ou CSS dans le layout est quelque chose d’extrêmement facile dans CakePHP: Par exemple:

1
2
3
4
5
6
7
8
9
10
11

// fichier View/Layouts/default.ctp

echo $this->Html->css( array(
   'bootstrap.min',
));

echo $this->Html->script(array(
   'jquery-1.10.2.min',
   'modernizr',
   'bootstrap.min',
));

Ceci aura pour effet d’ajouter les lignes suivantes dans le rendu HTML:

1
2
3
4

<link rel="stylesheet" type="text/css" href="/3musketeers/Humans-Rights-Report/css/bootstrap.min.css" />
<script type="text/javascript" src="/monsite/js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="/monsite/js/modernizr.js"></script>
<script type="text/javascript" src="/monsite/js/bootstrap.min.js"></script>

C’est cool, maintenant toutes les pages utilisant le layout par défaut auront ces balises automatiquement insérées dans leur balise head (en admettant que vous ayez inséré le code PHP dans la balise head bien évidemment…).

Mais que se passe-t-il dans le cas, par exemple, d’une page utilisant une carte Google Map? Plusieurs possibilités s’offrent à vous, et personnellement je n’en vois qu’une qui tient la route:

• Vous ajoutez le fichier JS dans toutes vos pages (voir exemple ci-dessus): c’est dommage, il n’y a qu’une page de votre site qui a besoin de ce script, et vous allez obliger vos visiteurs à télécharger et interpréter ce script à chaque chargement de page…
• Vous créez un layout spécial pour cette page uniquement: Cette solution peut tenir la route si cette page est très différente des autres, ce qui devrait être un cas assez rare… Normalement vous allez “bêtement” dupliquer le layout par défaut et ajouter le code pour insérer le fichier javascript nécessaire à l’utilisation de votre carte Google Map. Quelle horreur! Vous allez… dupliquer du code!
• Vous insérez le fichier javascript dans la balise head de votre site, mais uniquement sur la page utilisant la carte Google Maps: C’est évidemment la meilleure solution! Et comment qu’on fait ça?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// fichier View/Layouts/default.ctp

// ce fichier CSS est utilisé sur toutes les pages du site utilisant le layout par défaut
echo $this->Html->css( array(
   'bootstrap.min',
));

// ce code va insérer les fichiers CSS ajoutés depuis la vue (view)
echo $this->fetch('css');

// ces fichiers JS sont utilisés sur toutes les pages du site utilisant le layout par défaut
echo $this->Html->script(array(
   'jquery-1.10.2.min',
   'modernizr',
   'bootstrap.min',
));

// ce code va insérer les fichiers JS ajoutés depuis la vue (view)
echo $this->fetch('script');

1
2

// fichier View/Pages/carte.ctp
$this->Html->script('googlemaps', array( 'inline' => false ) );

Le secret réside dans le paramètre “inline”. Sa valeur par défaut est TRUE, et permet un affichage directement. Nous, c’est justement l’inverse qu’on veut, et passer “inline” à FALSE va ajouter le fichier à la liste des fichiers à insérer dynamiquement.

Voilà! Maintenant, vous pouvez ajouter les fichiers CSS et JS dont vous avez besoin directement depuis vos vues! Elle est pas belle la vie?