Monthly Archives: April 2014

Twitter Bootstrap — Making a Professionaly Looking Site

Twitter Bootstrap (shortly, Bootstrap) is a popular CSS framework allowing to make your web site professionally looking and visually appealing, even if you don’t have advanced designer skills. The latest version of Bootstrap is v.3.0.

Overview of Bootstrap Files

The source code of Bootstrap framework’s components is spread across many CSS files. It is known that downloading multiple small files is typically slower than downloading a single large file. For this reason, Bootstrap CSS stylesheets are “concatenated” with the special tool and distributed in a form of a single file named bootstrap.css.

However, this bootstrap.css file has a disadvantage: it contains many characters (white space characters, new line characters, comments, etc.) unneeded for code execution, wasting network bandwidth when downloading the file, thus increasing page load time. To fix this problem, the minification is used.

The minification is the process of removing all unnecessary characters from the source code without changing its functionality. The minified Bootstrap file is called bootstrap.min.css.

Grid System

In most web sites, content is required to be organized in a table-like structure having rows and columns. In figure below, you can see an example layout of a typical web site: it has the header block with a logo, the sidebar at the left, page content area in the middle, the ads bar at the right, and the footer at the bottom of the page. These blocks are arranged in a grid, although grid cells have unequal width (some cells can span several columns).

typical_grid

Bootstrap provides a simple layout grid system to make it easy to arrange content on your pages in rows and columns.

Each row consists of up to 12 columns (see figure below). Column width is flexible
and depends on the width of the grid container element. Column height may vary
depending on the height of the content of the cell. The space between columns is 30 pixels (15 pixels padding at both sides of the column).

bootstrap_grid

Columns can be spanned, so a single cell takes the space of several columns. For example, in figure above, the upper grid row consists of 12 columns, and each cell spans a single column. In the bottom row, the first cell spans 2 columns, the second and the third ones span 4 columns each, and the fourth cell spans 2 columns (in total we have 12 columns).

Defining the Grid

To arrange elements in a grid on your web page, you start from defining the
container by adding a <div> element having the .container CSS class. To add a new row to the grid, use a <div> element having the .row CSS class, as shown in the example below:

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

To add columns, you use <div> elements with CSS class names varying from .col-md-1 to .col-md-12. The number in the class name specifies how many columns each grid cell will span:

<div class="container">
  <div class="row">
    <div class="col-md-1">Cell 1</div>
    <div class="col-md-5">Cell 2</div>
    <div class="col-md-6">Cell 3</div>  
  </div>
</div>

In the example above, we have three cells. The first cell has a width of 1 (it uses the .col-md-1 class), the second cell spans 5 grid columns (class .col-md-5) and the third cell spans 6 columns (class .col-md-6).

Bootstrap’s Interface Components

Additionally to layout grid, Twitter Bootstrap provides many useful interface components. Here, we will consider two of them: navigation bar and dropdown menu.

Navigation Bar

Navigation bar is usually positioned on top of your web site and contains the links to main pages, like Home, Download, Support, About, etc. Twitter Bootstrap provides a nice visual style for the navbar (see figure below for example):

navbar

As you can see from the figure above, a navbar typically has the header (brand name
of your site can be placed here) and the links to main pages. To put a navbar on your page, you use the following HTML code:

<nav class="navbar navbar-default" role="navigation">  
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Hello World</a>    
  </div>
  <ul class="nav navbar-nav">      
    <li><a href="#">Home</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">About</a></li>
  </ul>    
</nav>

In line 1 above, we used the nav element, which contains all the navigation
bar information. The associated CSS class .navbar is defined by Bootstrap and
provides the base navigation bar’s appearance. The .navbar-default CSS class
specifies the “default” theme for the navigation bar.

The optional role attribute is an HTML
attribute allowing to annotate the page elements with machine-extractable
semantic information about the purpose of an element. In this example, the attribute tells that the nav element is used for navigation.

In lines 2-4, we define the navbar header area, which contains the Hello World
hyperlink. The brand hyperlink typically points to the main page of your site. The hyperlink has the .navbar-brand class that visually enhances the text.

In lines 5-10, we specify the navigation links for the Home, Download, Support and About pages. These links are organized inside an <ul> unordered list element. The element has CSS classes .nav and .navbar-nav that place list items in line and provide the hover item state.

Dropdown Menu

With Bootstrap navigation bar, it is possible to use the dropdown menu as a navigation item. For example, if the Support section of your site can be subdivided into Documentation and Help pages, these can be implemented as a dropdown menu (see figure below).

navbar_with_dropdown

You define the dropdown menu by replacing the Support list item from the previous example in the following way:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     Support <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Help</a></li>          
  </ul>
</li>

In the code above, we use the <li> element with CSS class .dropdown that indicates the dropdown menu (line 1). In lines 2-4, the <a> element defines the hyperlink to show when the menu is hidden (the Support text is shown followed by the triangle caret).

When the site user clicks the hyperlink, the dropdown menu (lines 5-8) appears. The <ul> unordered list element with class .dropdown-menu defines its visual appearance. The dropdown menu contains two items: the Documentation and Help hyperlinks.

Note: this post is an excerpt from my book Using Zend Framework 2

Advertisements

Leave a comment

Filed under Zend Framework 2

LEGO Programmer Toy

LEGO Minifigures Series 7 – COMPUTER PROGRAMMER. Only 4 left in stock. Hurry up.

The link: http://www.amazon.co.uk/LEGO-Minifigures-Series-COMPUTER-PROGRAMMER/dp/B007SWHHDQ

Leave a comment

April 13, 2014 · 9:31 am

ZF2 Routing Explained

When a site user enters a URL in a web browser, the request is finally dispatched to controller’s action. ZF2-based application maps page URLs to controllers and their actions. This mapping is accomplished with the help of routing. Routing is implemented as a part of Zend\Mvc component.

URL Structure

To better understand routing, we first need to look at the URL structure. A typical URL from an HTTP request consists of segments. The segments are URL parts delimited by slash characters (‘/’): there are scheme, host name, path and query segments.

For example, let’s look at the URL http://site1.yourserver.com/path/to/page?query=Search

This URL begins with a scheme segment (the scheme typically looks like http or https). Then, the host name segment follows which is the domain name of your web server (like site1.yourserver.com). Optional path segments follow the host name. So if you have the path part “/path/to/page” then “path”, “to”, and “page” would each be a URL segment. Next, after the question mark, the optional query part follows. It consists of one or several “name=value” parameters separated from each other by an ampersand character (‘&’).

Each segment in a URL uses special character encoding, which is named the URL encoding. This encoding ensures that the URL contains only “safe” characters from the ASCII table. If a URL contains unsafe characters, they are replaced with a percentage character (‘%’) followed by two hexadecimal digits (for example, the space character will be replaced by ‘%20’).

Route Types

Routing is a mechanism which allows to map HTTP request to the controller.
With routing, ZF2 knows which of the controller’s action method to execute
as the result of the request. For example, you can map http://localhost/ URL to IndexController::indexAction() method or http://localhost/about URL to IndexController::aboutAction() method.

A typical routing rule has the name, type and options. The name is used to uniquely identify the rule. The type defines the name of the PHP class which implements the algorithm used for comparing the URL string. The options is an array that includes the route string which should be compared against the URL string, and several parameters called the defaults.

In general, the routing algorithm may use any data from HTTP request for matching the route. However, typically, it takes only the URL string (or its substring) as input. The algorithm then compares the URL with the route, and if the URL string matches the route, returns several parameters, including the controller’s name and action method’s name, and possibly others. These parameters may be either hard-coded in a configuration file or grabbed from the URL string. If a certain parameter cannot be retrieved from the URL, its default value is returned.

There are several standard route types provided by Zend Framework 2. These route types are implemented as classes living in the Zend\Mvc\Router\Http namespace.

  • Literal Exact matching against a path part of a URL.
  • Segment Matching against a path segment (or several segments) of a URL.
  • Regex Matching the path part of a URL against a regular expression template.
  • Wildcard Matching the path part of a URL against a key/value pattern.
    Hostname Matching the host name against some criteria.
  • Scheme Matching URL scheme against some criteria.
  • Method Matching an HTTP method (e.g. GET, POST, etc.) against some criteria.

Each route type above (except the Method type) may be matched against a specific segment (or several segments) of a URL. The Method route type is matched against the HTTP method (either GET or POST) retrieved from HTTP request.

There is also the Query route type, which is declared deprecated and is not
recommended to use. This route type is actually not needed, because you can
retrieve query parameters from your URL with the Params controller plugin.

As an example of route definition, let’s consider the Literal route type.

Literal Route Type

With Literal route type, the route match is achieved only when you have the
exact literal match of the route string against the URL path. You typically use the Literal type for URLs which should be short and memorable, like ‘/about’ or ‘/news’.

Below, the definition of the route named “home” is presented. The “home” route is
usually mapped to the “index” action of the IndexController and points to the Home page of your site:

'home' => array(
'type' => 'Zend\Mvc\Router\Http\Literal',
  'options' => array(
    'route'    => '/',
    'defaults' => array(
      'controller' => 'Application\Controller\Index',
      'action'     => 'index',
    ),
  ),
),

Line 2 of this example says that the route’s type is Literal. The actual
route matching algorithm is implemented in the Zend\Mvc\Router\Http\Literal
class. You can either specify the full class name or its short alias (Literal).

Line 4 defines the route string to match against the URL path (the forward slash ‘/’ means the empty URL part). Because we have the literal route type, the route match is achieved only when you have the exact literal path match. For example, if you have the URL http://localhost/ or http://localhost, it will match the ‘/’ route string.

Lines 5-8 define the defaults, which are the parameters returned by the router
if the route matches. The controller and action parameters define the controller and controller’s action method which should be executed. You can also define other parameters here, if needed.

Note: this post is an excerpt from Chapter 5 “URL Routing” of my book Using Zend Framework 2.

1 Comment

Filed under Zend Framework 2