Month: January 2015

Zend 1.X web apps – Part 2 Twitter Bootstrap Navbar

ZendFramework-logo

Last post, we focused on getting Twitter Bootstrap integrated into a a basic Zend Framework 1 (ZF1) skeleton.  In this post we will be adding the Twitter Bootstrap Navbar into our skeleton application.

Cloning the bootzf1 app

Rather than start from scratch, we will want to leverage the skeleton we created in the previous post.  We can do this by creating a new git repository and pulling the bootzf1 code into it (Cloning it).  See http://stackoverflow.com/questions/849308/pull-push-from-multiple-remote-locations.

Or you can follow along at: https://github.com/jstormes/navbarzf1

Simple Navbar logic

Navbars are simply a collection of links, the harder question is how to layout the links in a logical way that will make sense to both the user and the developer.  Luckily the Zend 1 MVC structure gives us an easy way to blend the user navigation needs with the  developers need for a simple mapping of navigation to logic.

By tying each menu item to a controller/action, we can construct an navigation array that we can store in the application.ini.  Later we will can add ACL and context based options, but for now we will just blend the Bootstrap navbar concept with the Zend Navigation concept.  Confused, stay tuned, it should be clear soon.

Creating the navbar layout script

application/layouts/scripts/navbar.phtml

navbar.phtml location

As the navbar will appear on just about every page, we will add it to the application layout.

Start by creating a new layout script called navbar.phtml in the application/layouts/scripts directory.  This is where the navbar view logic will live.

Next, copy the the example from http://getbootstrap.com/components/#navbar-default into the navbar.phtml file.

Adding the Navigation placeholder into the navbar.phtml file

We now need to “cut out” the place for our logic driven menu to be injected into the navbar.  The following two code samples are the before and after for replacing the static links from the Twitter example with the Zend Navigation dynamically created links.

[pastacode lang=”php” message=”Before” highlight=”” provider=”manual”]

[/pastacode]

[pastacode lang=”php” message=”After” highlight=”” provider=”manual”]

[/pastacode]

Adjusting the layout

We need to tell the layout.phtml file to include the navbar.phtml file.  To do this edit the layout.phtml file and just after the <body> tag add:

<?php echo $this->render(‘navbar.phtml’);?> 

[pastacode lang=”php” message=”Before” highlight=”” provider=”manual”]

[/pastacode]

[pastacode lang=”php” message=”After” highlight=”26,27″ provider=”manual”]

[/pastacode]

Opening the application should now show an empty navbar at the top of the page.

Adding the logic to the Bootstrap.php file

The empty navbar is great, now it’s time to add links to the menu.  The best place to do that is in the Bootstrap.php file.

Grabbing the config

As we are storing our menu in the application.ini we need to get a copy of it into our Bootstrap.php.

Add the following near the top of the Bootstrap.ini file:

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

[/pastacode]

This little bit of code copies the application.ini into a Zend_Config object that we can use to read the values easily.

Populating the Navigation object

Using the values from the application.ini we can populate a starting menu.

Add the following to the bottom of the Bootstrap.php file:

[pastacode lang=”php” message=”” highlight=”” provider=”manual”]

[/pastacode]

This will build our menu using the values from the application.ini file.  Next, we just need to add some values to the that file.

Adding some menu item

In the application.ini add:

[pastacode lang=”php” message=”” highlight=”6,7,8,9,10,11,12,13,14,15,16,17,18,19″ provider=”manual”]

[/pastacode]

Refreshing the page now show our menu, but not quite like we would want.  We need to modify how Zend presents it’s menu items to match what Twitter Bootstrap expects.

A Library for our Twitter Bootstrap stuff

library/Bootstrap/View/Helper/Navigation

Path for Bootstrap Navigation helper

As we blend the two world of Twitter Bootstrap and Zend Framework 1, we need a place to store our server side logic.  The place to do that is a library.

Start by creating a directory called library and inside that, create a directory called Bootstrap.  This is where all the supporting php logic will go for Twitter Bootstrap.

Inside Bootstrap, create the path View/Helper/Navigation this is where we will add the code to replace Zend Navigation with our Bootstrap styled navigation.

This is where will will place our custom menu helper Menu.php.

[pastacode lang=”php” message=”Bootstrap menu helper” highlight=”” provider=”manual”]

[/pastacode]

This code will translate Zend’s menu structure into Bootstraps.

Telling Zend to use our library

Next, we will need to edit the applicaiton.ini file and add:

[pastacode lang=”php” message=”Adding Namespece for Bootstrap library” highlight=”6,7,8,9,10″ provider=”manual”]

[/pastacode]

Then a quick edit to Bootstrap.php ti finish it off:

[pastacode lang=”php” message=”Registering our new Menu Helper” highlight=”11″ provider=”manual”]

[/pastacode]

If you vie the page now, you should see a nice clean Twitter Bootstrap menu, driven by Zend 1.

Zend 1 with Twitter Bootstrap Menu

Zend 1 with Twitter Bootstrap Menu

 Summary

This is a solid boiler plate start for many applications, it addresses the navigation and provides good front end framework in jQuery and Bootstrap, while also providing a proven back end in Zend Framework.  I use this starting point allot for many web applications I start from scratch.

Last Thoughts

Some key concepts from the post are cloning of code and use of libraries.

Cloning is the basic power of Open Source.  Taking something started by another person, or some idea started at a earlier time and extending it in the here and now, to build something better.  This is at it’s heart a super powerful concept and it the basis for all modern technology, levering it in programming will be your key to success.

Software libraries are a subtle variation on cloning. Taking just a bit of logic you need and using it in something new.  This example used a library written by Michael Moussa, though he and I have never meet, we shared a common problem that he solved for me.  His code acting as a force multiplier freeing me to solve more complex problems.

See you next time.  Same Bat time, same Bat channel.

References

https://github.com/michaelmoussa/zf1-navigation-view-helper-bootstrap