Worklog Part 1: Building web application with Bootstrap

Integrating Start Bootstrap template

We will implement bootstrap based web application theme in Silex application. The best way to start out is with already available theme.

To install it into our application just execute bower install command in application web folder:

After installation of all required components (including jquery, bootstrap  and a few others) we will need some help how to use them. You can download sample implementation and start learn directly from included sample application.

After unzipping sample into local www folder we can navigate to it and start inspecting how it is constructed.

2015-11-26 19_08_40-SB Admin 2 - Bootstrap Admin Theme

This beautiful sample contain almost everything what is needed to build very powerful web application !

Next step is converting part of this sample code into our application.

Integrating template in silex application

We need to analyze index.html file from the sample and transfer definitions into our base.html.twig file.  As you can see in the content of twig file, we only copy “link” and “script” nodes to our file and adjust locations of used resources.

After you have everything in place the response after loading index.php should be something like this (Firefox/Developer tools/Network screen):

2015-11-26 19_46_09-Network - http___localhost_worklog_web_index.php

All resources should be loaded successfully .

The content of twig base file:

Worklog application folder now grow little larger because of new front-end components in bower_components folder.

2015-11-26 20_03_12-Programmer's Notepad - [index.html]

At this point our web application is almost empty, but we have all  necessary components ready to use.

This example application is available on the Github.

Leave a Reply

Your email address will not be published.