Symfony et bootstrap

1. Bootstrap
2. Ajout du support de Bootstrap dans Symphony
3. Utilisation de Bootstrap dans les templates de l'application
- 3.1. Mise en place d'une structure de page
- 3.2. Utilisation des styles de widgets

1 Bootstrap

Un framework CSS (et JS) populaire : http://getbootstrap.com/

Documentation : http://getbootstrap.com/css/

2 Ajout du support de Bootstrap dans Symphony

Différentes solutions d'installation sont possibles. Nous allons nous baser sur l'utilisation du bundle Assetic de Symfony, qui permet notamment de gérer les sources CSS et Javascript comme les sources PHP dans l'environnement de développement.

2.1 Activation d'Assetic

On installe le bundle assetic avec composer :

php ../bin/composer.phar require symfony/assetic-bundle

On modifie la liste des budles chargés, dans app/AppKernel.php (cf. documentation Assetic)

Enfin, modification de config.yml pour ajouter :

assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~

2.2 Installation de JQuery et Bootstrap

Installer les packages JQuery et Bootstrap avec composer :

Modifier composer.json pour ajouter les dépendances :

"require": {
    ...
    "twitter/bootstrap": "3.*",
    "components/jquery": "1.11.1"
}

Installer les packages :
```
php ../bin/composer.phar update
```

2.3 Définition d'assets dans Assetic

On ajoute la configuration des assets pour JQuery et Bootstrap dans la configuration d'Assetic dans config.yml (source : Bootstrap 3 in Symfony 2 with Composer and no extra bundles):

assetic:
...
  assets:
      bootstrap_js:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/js/bootstrap.js
      bootstrap_css:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap.css
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/css/bootstrap-theme.css
        filters: [cssrewrite]

      bootstrap_glyphicons_ttf:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
        output: "fonts/glyphicons-halflings-regular.ttf"
      bootstrap_glyphicons_eot:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
        output: "fonts/glyphicons-halflings-regular.eot"
      bootstrap_glyphicons_svg:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
        output: "fonts/glyphicons-halflings-regular.svg"
      bootstrap_glyphicons_woff:
        inputs:
          - %kernel.root_dir%/../vendor/twitter/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
        output: "fonts/glyphicons-halflings-regular.woff"

      jquery:
        inputs:
          - %kernel.root_dir%/../vendor/components/jquery/jquery.js

Tester sur http://localhost:8000/app_dev.php que l'application fonctionne toujours.

2.4 Ajout du chargement des feuilles de styles et des scripts aux templates

On modifie le template base.html.twig pour définir le chargement des assets bootstrap_css, jquery et bootstrap_js dans les pages, via les blocs stylesheets et javascripts (initialement vides):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
          {% stylesheets '@bootstrap_css' filter='cssrewrite' %}
             <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}"/>
           {% endstylesheets %}
           <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        {% endblock %}
    </head>
    <body>
        {% block body %}{% endblock %}
        {% block javascripts %}
          {% javascripts '@jquery' '@bootstrap_js' %}
            <script type="text/javascript" src="{{ asset_url }}"></script>
          {% endjavascripts %}
        {% endblock %}
    </body>
</html>

Il faut ensuite vider le cache afin de s'assurer que les assets soient bien regénérés par Assetic :

php bin/console cache:clear

2.5 Vérifications

Vérifier que les liens vers les assets CSS et JS de Bootstrap et JQuery sont bien présents dans les headers et le corps des pages HTML, qui chargent des ressources générées dynamiquement par Symfony (examiner le source de la page HTML).

Comparer le comportement entre http://localhost:8000/app_dev.php et http://localhost:8000/app_dev.php/circuit/ Si seulement une partie des ressources manque, expliquer pourquoi.

3 Utilisation de Bootstrap dans les templates de l'application

3.1 Mise en place d'une structure de page

Bootstrap repose sur une structure de pages un peu particulière, avec un certain nombre de blocs <div> dans l'arbre DOM, comme par exemple le bloc englobant de classe container ou container-fluid :

<div class="container">
...
</div>

On modifiera alors la structure des templates pour intégrer ces éléments structurants, par exemple en définissant, dans le bloc TWIG body, dans base.html.twig les grands éléments de la mise en page, et en réservant l'affichage de chacune des pages de l'application à un sous-bloc main. Extrait de base.html.twig :

<!DOCTYPE html>
<html>
    <body>

      ...

        <div class="container-fluid">
                {% block body %}
                <div class="row">
                        <div class="col-sm-3 col-md-2 sidebar">
                                {% block sidebar %}
                                ...
                                {% endblock %} {# sidebar #}
                        </div> <!-- sidebar -->
                        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

                           {% block main %} {% endblock %}

                        </div> <!-- main -->
                </div> <!-- row -->

                {% endblock %} {# body #}

        </div> <!-- container-fluid -->
        ...
    </body>
</html>

Chaque page définira alors son contenu à l'intérieur du bloc main surchargé. Exemple index.html.twig :

{% extends 'base.html.twig' %}

{% block main %}

<h1>Hello world !</h1>

{% endblock %}

3.2 Utilisation des styles de widgets

Modifier les templates afin d'utiliser les bonnes classes pour les éléments d'interface, par exemple pour ajouter des liens en forme de boutons pour les actions de création, ajout ou suppressions.