PHP Professional এবং Zend Certified PHP Engineer (ZCPE ) Course এ সীমিত সংখ্যক আসন বাকি আছে। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করার জন্য অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল নম্বর : ০১৭২২ ৮১ ৭৫ ৯১

Symfony with Bootstrap

In this tutorial we will learn how to enrich our view with bootstrap front-end framework. Mostly we will work with twig. And this tutorial is the continuation of previous tutorial. So, have fun.

Symfony and bootstrap

Each view twig file(index, new, show, edit) usually extends one base template. This base template exists inside “/app/Resources/views/” named, “base.html.twig

Therefore, to change our all templates we need to insert bootstrap in this template. And all the JavaScript and CSS files exist inside “/web/” folder

So let’s start –

Step 1:

Create two folders “/web/js/” and “/web/css/”

Step 2:

Download JQuery from http://jquery.com/ (1.11.1)and place it to “/web/js/”

Download Bootstrap from http://getbootstrap.com/ and place bootstrap and bootstrap-theme to “/web/css/” folder

Change base.html.twig from “/app/Resources/views/” folder –

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}
            <link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap.min.css')}}" />
            <link rel="stylesheet" type="text/css" href="{{asset('css/bootstrap-theme.min.css')}}" />
        {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        

        <div class="container">

        <nav class="navbar navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="{{ path('book') }}">Book Inventory</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="{{ path('book') }}">Home</a></li>
              </ul>
            </div>
          </div>
        </nav>


            {% block body %}{% endblock %}
            {% block javascripts %}
                <script type="text/javascript" src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
                <script type="text/javascript" src="{{asset('js/bootstrap.min.js')}}"></script>
            {% endblock %}
        </div>
    </body>
</html>

Step 3:
In the book controller change createDeleteForm() method as follows. We have just added one bootstrap class.

private function createDeleteForm($id)
    {
        return $this->createFormBuilder()
            ->setAction($this->generateUrl('book_delete', array('id' => $id)))
            ->setMethod('DELETE')
            ->add('submit', 'submit', array('label' => 'Delete', 
                                            'attr' => array('class' => 'btn btn-danger btn-lg')))
            ->getForm()
        ;
    }

In createCreateForm() method add form role, which is needed for bootstrap form –

private function createCreateForm(Book $entity)
    {
        $form = $this->createForm(new BookType(), $entity, array(
            'action' => $this->generateUrl('book_create'),
            'method' => 'POST',
            'attr'=> array('role'=>'form'),
        ));

        $form->add('submit', 'submit', array('label' => 'Create'));

        return $form;
    }

Step 4:

Now change index.html.twig as follows – We have just added bootstrap css class –

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

{% block body -%}
    <h1>Book list <span><a class="btn btn-primary btn-lg" href="{{ path('book_new') }}" rold="button">
                Create a new entry
    </a></span></h1>

    <div class="table-responsive"> 
        <table class="records_list table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Author</th>
                    <th>Language</th>
                    <th>Publisher</th>
                    <th>Summary</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for entity in entities %}
                <tr>
                    <td><a href="{{ path('book_show', { 'id': entity.id }) }}">{{ entity.id }}</a></td>
                    <td>{{ entity.name }}</td>
                    <td>{{ entity.author }}</td>
                    <td>{{ entity.language }}</td>
                    <td>{{ entity.publisher }}</td>
                    <td>{{ entity.summary }}</td>
                    <td style="text-align: center; vertical-align: middle;">
                    <ul style="list-style-type: none;">
                        <li>
                            <a class="btn btn-default btn-xs" href="{{ path('book_show', { 'id': entity.id }) }}">show</a>
                        </li>
                        <li style="margin-top: 10px;">
                            <a class="btn btn-default btn-xs" href="{{ path('book_edit', { 'id': entity.id }) }}">edit</a>
                        </li>
                    </ul>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
        
    

    {% endblock %}

Step 5:

In new.html.twig we have to lots of changes. We will catch each form element and add class –

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

{% block body -%}
    <h1>Book creation</h1>

    {{ form_start(form) }}
    	<div class="form-group">
    		{{ form_row(form.name, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(form.author, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(form.language, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(form.publisher, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(form.summary, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_widget(form.submit, {'attr': {'class': 'btn btn-default'}}) }}
    	</div>
    {{ form_end(form) }}

{% endblock %}

Step 6:

In show.html.twig we also need to do some change for our purpose –

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

{% block body -%}
    <h1>Book</h1>

    <div class="table-responsive">
        <table class="record_properties table">
            <tbody>
                <tr>
                    <th>Id</th>
                    <td>{{ entity.id }}</td>
                </tr>
                <tr>
                    <th>Name</th>
                    <td>{{ entity.name }}</td>
                </tr>
                <tr>
                    <th>Author</th>
                    <td>{{ entity.author }}</td>
                </tr>
                <tr>
                    <th>Language</th>
                    <td>{{ entity.language }}</td>
                </tr>
                <tr>
                    <th>Publisher</th>
                    <td>{{ entity.publisher }}</td>
                </tr>
                <tr>
                    <th>Summary</th>
                    <td>{{ entity.summary }}</td>
                </tr>
            </tbody>
        </table>
    </div>

    
    <a class="btn btn-primary btn-lg" href="{{ path('book') }}" rold="button">
        Back to the list
    </a>
    
    
    <a class="btn btn-primary btn-lg" href="{{ path('book_edit', { 'id': entity.id }) }}" rold="button">
        Edit
    </a>
    
    <div style="margin-top: 20px;">
    <div>

    {{ form(delete_form) }}


{% endblock %}

Step 7:

Now for the last edit.html.twig we have to do some changes –

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

{% block body -%}
    <h1>Book edit</h1>

	{{ form_start(edit_form) }}
    	<div class="form-group">
    		{{ form_row(edit_form.name, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(edit_form.author, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(edit_form.language, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(edit_form.publisher, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_row(edit_form.summary, {'attr': {'class': 'form-control'}}) }}
    	</div>
    	<div class="form-group">
    		{{ form_widget(edit_form.submit, {'attr': {'class': 'btn btn-default'}}) }}
    	</div>
    {{ form_end(edit_form) }}


    {{ form(delete_form) }}

{% endblock %}

Now open your browser and browse all the pages. And see what have you done with bootstrap.

By the way, you can download all the code from my –

Happy coding… 🙂

Symfony + Bootstrap

Hej, I’m from Bangladesh. Learning programming is one of the freaking decisions I have taken in my life. Because, it makes me and my life crazy. I have great weakness on open source technologies. Perhaps, that’s why I do not know any closed source language. I fall in love with programming, when I started my undergraduate in East West University. Till now, I can not live without it.

2 comments on “Symfony with Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *