Creating navigation with bootstrap

We were start from already prepared bootstrap theme sample and we will try to take as much as possible out of it.

Navigation

Navigation bar will be at the top of each application page and should be always visible. All shared elements which are on all pages, are going to the base layout, this is base.html.twig in our application.

If you need some specific information about bootstrap you can probably found it on this site. W3School.com site is one of my primary sources for web and SQL related questions.

After some experimentation I create something like that:

Main navigation bar at the top is always visible even when we scroll down beyond visible space (navbar-fixed-top). This require little additional CSS settings that our pages on the top has some default margin.

CSS

In our worklog.css we define default top margin as:

body {
    padding-top:65px;
}

body {

padding-top:65px;

}

Because we define “body” element as selector, this will be valid for every web page in our web site.

Navigation tag with bootstrap settings

One part of template looks like:

<body>
    <div id="main-panel">
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="navbar-header">
                <a class="navbar-brand" href="{{app.request.basepath}}/index.php">
                    <img alt="Bisaga" src="{{app.request.basepath}}/images/w24x24.png"/>
                </a>
            </div>
            <div>    
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <a href="{{app.request.basepath}}/index.php/workday">
                            <i class="fa fa-calendar-o fa-fw fa-lg"></i>
                        </a>
                    </li>

<body>

</a>

</div>

<div>

<li>

</a>

</li>

We create navigation bar with brand icon on the left and some icons with two direct links (calendar, alerts) and two drop-down menus for some additional actions.

You can download the whole file from here.

Controllers

Default page on the web site will be used as dashboard, so we create dashboard.html.twig template file and controller class in DashboardController.php . We also connect default ‘/’ route to this controller (Application.php).

    private function createRoutes() 
    {
        $this->get('/', 'Bisaga\Controller\DashboardController::show');
       
    }

private function createRoutes()

{

$this->get('/', 'Bisaga\Controller\DashboardController::show');

}

Links

For links we use direct path navigation with little help of Silex Application constants, so links are assembled like this:

{{app.request.basepath}}/index.php/workday

1	{{app.request.basepath}}/index.php/workday

In some point I will probably study assetic component from Symfony but for now I will stick to this simplest semi-direct references.

Icons

Icons are actually characters from the font Font-Awesome. Images on the navigation bar are slightly larger (fa-lg) then those in drop-down menus.

<a href="{{app.request.basepath}}/index.php/workday">
    <i class="fa fa-calendar-o fa-fw fa-lg"></i>
</a>

</a>

You can learn more about font awesome usage here.

This sample application is published on github.

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:

H:\Ampps\www\worklog\web>bower install startbootstrap-sb-admin-2

1	H:\Ampps\www\worklog\web>bower install startbootstrap-sb-admin-2

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.

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):

All resources should be loaded successfully .

The content of twig base file:

{# Base page template #}
<html>
<head>
    {% block head %}
        <!-- Standard HTML head -->
        <meta charset="UtF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}{% endblock %} - Bisaga Worklog</title>
        {% block stylesheets %}{% endblock %} 
        
        <!-- FAVICON -->
        <link rel="icon" type="image/x-icon" href="{{app.request.basepath}}/favicon.ico" />
        
        <!-- Bootstrap Core CSS -->
        <link rel="stylesheet" href="{{app.request.basepath}}/bower_components/bootstrap/dist/css/bootstrap.min.css" />

        <!-- MetisMenu CSS -->
        <link href="{{app.request.basepath}}/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">

        <!-- Timeline CSS -->
        <link href="{{app.request.basepath}}/bower_components/startbootstrap-sb-admin-2/dist/css/timeline.css" rel="stylesheet">

        <!-- SB-Admin CSS -->
        <link href="{{app.request.basepath}}/bower_components/startbootstrap-sb-admin-2/dist/css/sb-admin-2.css" rel="stylesheet">

        <!-- Morris Charts CSS -->
        <link href="{{app.request.basepath}}/bower_components/morrisjs/morris.css" rel="stylesheet">

        <!-- Custom Fonts -->
        <link href="{{app.request.basepath}}/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- Worklog custom CSS -->
        <link rel="stylesheet" href="{{app.request.basepath}}/css/worklog.css" />
        
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->          
    {% endblock %}    
</head>
<body>
    <div id="content">{% block content %}{% endblock %}</div>
    <div id="footer">
        {% block footer %}
            &copy; Copyright 2015 by <a href="http://bisaga.com/">Bisaga</a>.
        {% endblock %}
    </div>
    {% block javascripts %}{% endblock %}
    <!-- jQuery -->
    <script src="{{app.request.basepath}}/bower_components/jquery/dist/jquery.min.js"></script>
    
    <!-- Bootstrap Core JavaScript -->
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="{{app.request.basepath}}/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>    

    <!-- Metis Menu Plugin JavaScript -->
    <script src="{{app.request.basepath}}/bower_components/metisMenu/dist/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="{{app.request.basepath}}/bower_components/raphael/raphael-min.js"></script>
    <script src="{{app.request.basepath}}/bower_components/morrisjs/morris.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="{{app.request.basepath}}/bower_components/startbootstrap-sb-admin-2/dist/js/sb-admin-2.js"></script>
    
</body>
</html>

{# Base page template #}

<html>

<head>

{% block head %}

<title>{% block title %}{% endblock %} - Bisaga Worklog</title>

{% block stylesheets %}{% endblock %}

<!--[if lt IE 9]>

<![endif]-->

{% endblock %}

</head>

<body>

<div id="content">{% block content %}{% endblock %}</div>

{% block footer %}

{% endblock %}

</div>

{% block javascripts %}{% endblock %}

</body>

</html>

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

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.

Tag: Worklog

Worklog Part 2: Creating navigation with bootstrap

Creating navigation with bootstrap

Navigation

CSS

Navigation tag with bootstrap settings

Controllers

Links

Icons

Worklog Part 1: Building web application with Bootstrap

Integrating Start Bootstrap template

Integrating template in silex application