Utiliser ses fichiers CSS et JS sous Symfony

L'objectif

Ce tutoriel permet de savoir comment utiliser le framework css Bootstrap ainsi que nos propres fichiers CSS et Javascript dans le framework PHP Symfony.

Les pré-requis

Vous devez télécharer Bootstrap : Télécharger Bootstrap

Créer les dossiers

Créer un dossier "css" et un autre "js" où vous voulez du moment qu'ils se trouvent dans le dossier "src". Exemple : "src/AppBundle/public/css"

Créer vos fichiers "style.css" et "index.js" par exemple, ces fichiers contiendront votre propre code

Lors de l'accès au site, c'est le dossier "web" qui est chargé, il faut donc pour que les fichiers soient générés dans le dossier "web", exécuter la commande suivante :

php app/console assetic:dump

Lorsque vos fichiers CSS et JS ont été modifiés et qu'aucun changement n'est constaté sur la page (ce qui arrive souvent en mode "prod"), il faut exécuter la commande suivante :

php app/console assets:install --symlink web

Faire appel à ces fichiers

Vous devez faire appel à ces fichiers dans l'en-tête de la page (pour les fichiers css) et dans le bas de la page pour les fichiers JS comme le montre les codes ci-dessous :

// Dans l'en-tête de la page
<link rel="stylesheet" href="{{ asset('bundles/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('bundles/framework/css/style.css') }}" type="text/css" />
// Dans le bas de page
<script src="{{ asset('bundles/framework/js/jquery.min.js') }}"></script>
<script src="{{ asset('bundles/bootstrap/js/bootstrap.min.js') }}"></script>

Pour terminer

C'est une chose assez basique mais cela peut ne pas être évident lorsque l'on découvre un framework.

N'hésitez pas à me contacter.

Commentaires

Les commentaires sont soumis à un système de modération avant d'être publiés.

Rédiger un commentaire