How to add Twitter Bootstrap to a Symfony 2 application

Note: the following assumes you are not using gulp, grunt or another workflow tool. If you are, and want to include downloading and compiling Bootstrap and JQuery into your workflow, see their websites for more information on how to do this.

  1. Download the latest version of Bootstrap from http://getbootstrap.com/.
  2. If you extract the zip file, you will notice 3 folders:
    |-css
    |-fonts
    |-js
    
  3. Copy these into your web directory so that your web directory looks like the following:

    |-web
        |-css
        |-fonts
        |-js
    
  4. Download jquery minified version from https://jquery.com/
  5. Save this file into your web/js directory
  6. In you app/Resources/views/base.html.twig file, add the following:
    <!-- in head tag -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
    <link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
    
    <!-- at end of body tag -->
    <script src="{{ asset('js/jquery.min.js') }}"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}"></script>
    

    If you are using the default base.html.twig file, it will look like this:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8" />
            <title>{% block title %}Welcome!{% endblock %}</title>
            {% block stylesheets %}{% endblock %}
            <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
            <link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}" />
            <link rel="stylesheet" href="{{ asset('css/bootstrap-theme.css') }}" />
        </head>
        <body>
            <h1>app/Resources/view/base.html.twig</h1>
             {% block nav %}{% endblock %}
            {% block body %}{% endblock %}
            <script src="{{ asset('js/jquery.min.js') }}"></script>
            <script src="{{ asset('js/bootstrap.min.js') }}"></script>
            {% block javascripts %}{% endblock %}
        </body>
    </html>
    

Bonus:
Symfony includes a form theme for Bootstrap out of the box. To enable Bootstrap in your forms without having to create custom templates, simply add the following to your app/config/config.yml file:

twig:
    form:
        resources: ['bootstrap_3_layout.html.twig']
        # resources: ['bootstrap_3_horizontal_layout.html.twig']

Source: http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme

Customizing Form layout in Symfony

While working on a recent Symfony project I needed to modify the default Symfony form layout. In my case I needed to add a custom CSS class to the form.

Note: the tips below assume you are using the Twig layout engine.

1) Create a file to contain your overrides called app/resources/form/fields.html.twig.

2) Open up the base file

3) Copy the required blocks from the base file to your new fields.html.twig file an modify as needed.

4) In the forms that you want to use your new layout, add the following:
{% form_theme delete_form ‘form/fields.html.twig’ %}
where delete_form is the name of the form variable in the twig file.

Examples:

a) Add a class to the form (paste the following into your fields.html.twig file):

# line 270 in base file
{%- block form_start -%}
    {% set method = method|upper %}
    {%- if method in ["GET", "POST"] -%}
        {% set form_method = method %}
    {%- else -%}
        {% set form_method = "POST" %}
    {%- endif -%}
    <form name="{{ name }}" method="{{ form_method|lower }}"
{% if action != '' %} action="{{ action }}"{% endif %}
{% for attrname, attrvalue in attr %} {{ attrname }}="{{ attrvalue }}"
{% endfor %}{% if multipart %} enctype="multipart/form-data"{% endif %} 
class="form-class-name">
    {%- if form_method != method -%}
        <input type="hidden" name="_method" value="{{ method }}" />
    {%- endif -%}
{%- endblock form_start -%}

b) Add class to basic text fields:

{%- block form_widget_simple -%}
    {%- set type = type|default('text') -%}
    <input type="{{ type }}" class="input-class-name" {{ block('widget_attributes') }} 
{% if value is not empty %}value="{{ value }}" 
{% endif %}/>
{%- endblock form_widget_simple -%}

Symfony Docs here: http://symfony.com/doc/current/book/forms.html#global-form-theming

How to view all defined routes in Symfony 2 PHP application

Every so often it is useful to list all of the defined routes in your Symfony application, whether to find out the name of the route, or to debug why a route is being used unexpectedly (routes are called based on the first one that matches). To view the routes, simply type the following in the console:

php app/console debug:router

or

php bin/console debug:router

depending on your version.

Resources:
http://symfony.com/doc/current/book/routing.html#visualizing-debugging-routes

Create a simple CRUD app with Symfony2

Symfony2 has an in built command for building simple CRUD pages for your entities. You can use this to create simple admin pages very quickly.

The command is: php app/console generate:doctrine:crud

This will run in interactive mode giving you options on which entity to create the pages for and which pages to create (All the CRUD pages, or just the read pages).

The Configuration format option specifies (amoung other things) where the routing information is stored. I prefer to use yml so that all of my routing information is together.

Resources:

http://symfony.com/doc/current/bundles/SensioGeneratorBundle/commands/generate_doctrine_crud.html