Les bases de Symfony – Création de templates avec Boostrap, Font Awesome, jQuery et jQuery UI

Toute application web qui se respecte a besoin de templates personnalisés. Grâce aux librairies telles que Bootstrap, Font Awesome et jQuery, la création de pages HTML n’a jamais été aussi facile et aussi propre.

Et l’intégration de ces librairies au framework Symfony est également très facile, à condition de suivre quelques étapes bien précises.

Pour les ajouter à Symfony, il est possible d’utiliser les packages suivants qui vont ajouter à votre application tous les composants nécessaires :

  • twbs/bootstrap, pour Boostrap
  • components/font-awesome, pour Font Awesome
  • components/jquery, pour jQuery
  • components/jqueryui, pour jQuery UI

Pour gérer ces librairies proprement au sein de votre application, vous aurez également besoin de deux packages complémentaires :

  • symfony/assetic-bundle, un bundle qui permet l’intégration de la librairie Assetic, un framework de gestion d’assets (fichiers) pour PHP
  • oyejorge/less.php, un package qui ajoute le composants less.php, un processeur LESS écrit en PHP qui permet la gestion et la fusion de vos fichiers CSS, JavaScript, etc.

Étape 1 : Installer le bundle Assetic et les packages less.php, Bootstrap, Font Awesime, jQuery et jQuery UI

Pour installer ces composants, vous avez la possibilité d’utiliser Composer, qui va faire tout le travail pour vous :

php composer.phar require "symfony/assetic-bundle" "oyejorge/less.php" "twbs/bootstrap" "components/font-awesome" "components/jquery" "components/jqueryui"

Étape 2 : Activation du bundle Assetic

Le bundle Assetic fraîchement installé doit maintenant être activé au niveau du noyau Symfony. Pour cela, modifiez le fichier AppKernel.php situé sous app/config/ et ajoutez la ligne suivante :

class AppKernel extends Kernel
{
    // ...

    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
        );

        // ...
    }
}
app/config/AppKernel.php

Étape 3 : Configuration du bundle Assetic

C’est le gestionnaire d’assets Assetic qui va se charger de gérer l’ensemble des fichiers de styles, les scripts et les polices personnalisées des librairies et de les rendre disponibles dans vos templates. Ajoutez la configuration suivante à votre fichier config.yml situé sous app/config :

# AsseticBundle Configuration
assetic:
    filters:
        lessphp:
            file: "%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php"
            apply_to: ".less$"
            formatter: "compressed"
            preserve_comments: false
        cssrewrite: ~
    assets:
        jquery_js:
            inputs:
                - "%kernel.root_dir%/../vendor/components/jquery/jquery.min.js"
            output: "js/jquery.min.js"
        jquery_ui_js:
            inputs:
                - "%kernel.root_dir%/../vendor/components/jqueryui/jquery-ui.min.js"
            output: "js/jquery-ui.min.js"
        bootstrap_css:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/less/bootstrap.less"
            filters:
                - lessphp
                - cssrewrite
            output: "css/bootstrap.css"
        bootstrap_js:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/affix.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/alert.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/button.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/carousel.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/collapse.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/dropdown.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/modal.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tooltip.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/popover.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/scrollspy.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/tab.js"
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/js/transition.js"
            output: js/bootstrap.js
        fonts_glyphicons_eot:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.eot"
            output: "fonts/glyphicons-halflings-regular.eot"
        fonts_glyphicons_svg:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.svg"
            output: "fonts/glyphicons-halflings-regular.svg"
        fonts_glyphicons_ttf:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.ttf"
            output: "fonts/glyphicons-halflings-regular.ttf"
        fonts_glyphicons_woff:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff"
            output: "fonts/glyphicons-halflings-regular.woff"
        fonts_glyphicons_woff2:
            inputs:
                - "%kernel.root_dir%/../vendor/twbs/bootstrap/fonts/glyphicons-halflings-regular.woff2"
            output: "fonts/glyphicons-halflings-regular.woff2"
        font_awesome_css:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/less/font-awesome.less"
            filters:
                - lessphp
                - cssrewrite
            output: "css/font-awesome.css"
        font_awesome_fonts_eot:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/fonts/fontawesome-webfont.eot"
            output: "fonts/fontawesome-webfont.eot"
        font_awesome_fonts_svg:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/fonts/fontawesome-webfont.svg"
            output: "fonts/fontawesome-webfont.svg"
        font_awesome_fonts_ttf:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/fonts/fontawesome-webfont.ttf"
            output: "fonts/fontawesome-webfont.ttf"
        font_awesome_fonts_woff:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/fonts/fontawesome-webfont.woff"
            output: "fonts/fontawesome-webfont.woff"
        font_awesome_fonts_woff2:
            inputs:
                - "%kernel.root_dir%/../vendor/components/font-awesome/fonts/fontawesome-webfont.woff2"
            output: "fonts/fontawesome-webfont.woff2"
app/config/config.yml

Étape 4 : Utiliser les librairies Boostrap, Font Awesome et jQuery dans vos templates

Maintenant que toutes les librairies sont installées et gérées par Assetic, vous pouvez les utiliser dans vos templates personnalisés ou dans le fichier base.html.twig situé sous app/Resources/views :

<!DOCTYPE html>
<html lang="fr">
  	<head>
	  //...
	  
	  {% block stylesheets %}
	  {% stylesheets filter='cssrewrite'
	  'css/bootstrap.css'
	  'css/font-awesome.css'
	  'bundles/app/css/style.css' %}
	  <link href="{{ asset_url }}" rel="stylesheet">
	  {% endstylesheets %}
	  {% endblock %}
  	</head>
  	<body>
	  //...
	  
	  {% block javascripts %}
	  {% javascripts
	  	'js/jquery.min.js'
	  	'js/jquery-ui.min.js'
	  	'js/bootstrap.js'
	  	'@AppBundle/Resources/public/js/script.js' %}
	  <script src="{{ asset_url }}"></script>
	  {% endjavascripts %}
	  {% endblock %}
  	</body>
</html>
app/Resources/views/base.html.twig

En plus des librairies que vous venez d’installer, vous pouvez utiliser un fichier (ou plusieurs) de styles CSS et un fichier (plusieurs aussi) de scripts JavaScript. Pour cela, ajoutez les simplement aux blocs stylesheets et javascripts du template ci-dessus avec les fichiers présents dans les dossiers Resources/public/css et Resources/public/css de votre bundle.

Étape 5 : Activer les templates Bootstrap sur les formulaires Symfony

Pour terminer, vous avez la possibilité d’activer les templates Bootstrap de formulaires natifs de Symfony, introduits avec la version 2.6 du framework.

Ajoutez ces deux lignes à votre fichier config.yml situé sous app/config afin d’activer le thème Bootstrap pour les formulaires Symfony (attention la ligne twig: est normalement déjà présente dans le fichier, veuillez à ne pas l’insérer deux fois) :

# Twig Configuration
twig:
    form_themes:
        - 'bootstrap_3_layout.html.twig'
app/config/config.yml

Étape 6 : Générer les fichiers

Assetic va maintenant entrer en action et gérer l’ensemble des fichiers de styles, de scripts et de polices en les plaçant dans les répertoires web/css, web/js et web/fonts  de votre application. Pour cela, exécutez simplement la commande suivante :

php bin/console assets:install --symlink
php bin/console assetic:dump

Quand votre application sera prête à passer en production, la commande deviendra simplement :

php bin/console assets:install --symlink --env prod
php app/console assetic:dump --env prod

4 réponses sur “Les bases de Symfony – Création de templates avec Boostrap, Font Awesome, jQuery et jQuery UI”

  1. salut,
    j’ai suivi votre tuto, et à la fin j’ai eu une erreur lors de l’exécution de ma page d’accueil, en feuillant sur internet j’ai trouvé qu’il faut ajouter
    bundles:[liste_bundles_cree] #dans assetic:
    merci de vérifier et bonne continuation.

    1. Je n’ai jamais eu besoin d’ajouter cette ligne dans mon fichier de configuration. Pourrais-tu copier/coller la ligne que tu as dû rajouter ?

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *