Friday, January 18, 2013

Looking into Zend_Navigation - Part 1

Zend_Navigation is an elegant way to handle the navigation elements of your site, i.e. the menus, breadcrumbs, sitemaps etc. It lets you to keep the view, where you might be using smart looking javascript menu libraries and the content separate.  You can integrate your navigation with Zend_Acl, which would handle the authorization part of the navigation. Isn't that just awesome!!!

In this tutorial we will look into Zend_Navigation step-by-step, from easy to advanced. And even some hacks that I found useful when I was trying some real cool menu libraries.

Setting up for Zend_Navigation...


First lets start with the basic. Our main menu structure would be the following, we will add sub-menus to it later. For simplicity we will assume only one controller with several actions.

Home  - links to default route i.e. index/index
Abouts Us - links to index/aboutus
Portfolio - links to index/portfolio
Services - links to index/services

Get your Zend setup ready. I am working with Zend Framework 1.12 but I guess any 1.x version should work. First create all the required actions in the IndexController and their corresponding views. The actions doesn't need do much except show their corresponding view page, as we are not actually bothered about what they do or show in this tutorial, but how to navigate to them. The corresponding views similarly can be simple - just stating what they are should be sufficient.

We should have something like this to start work with-

Now we will need to create the default layout for the views. For that create layout.phtml in application/layouts/scripts. And copy the following to it.
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning Zend Navigation</title>
</head>
<body>
<h1>Learning Zend Navigation</h1>
<?php
    echo $this->layout()->content;
?>
</body>
</html>
and add the following line to your application.ini
resources.layout.layoutPath = APPLICATION_PATH "/layouts/scripts"
Refresh the page and this is how it should look -

Photobucket


The navigation.xml....


Now that we have the basic setup ready, let us start with the navigation. For that we create navigation.xml in application/configs with the following content.
<?xml version="1.0" encoding="UTF-8"?>
<configdata>
    <nav>
     <home>
         <label>Home</label>
         <controller>index</controller>
   <action>index</action>
         <pages>
             <aboutus>
                 <label>About Us</label>
                 <controller>index</controller>
                 <action>aboutus</action>
             </aboutus>
             <portfolio>
                 <label>Portfolio</label>
                 <controller>index</controller>
                 <action>portfolio</action>
             </portfolio>
             <services>
              <label>Services</label>
                 <controller>index</controller>
                 <action>services</action>
             </services>            
         </pages>
     </home>
    </nav>
</configdata>
In your Bootstrap.php read the xml and set it in the view.
protected function _initNavigation() {
    $config = new Zend_Config_Xml(
                 APPLICATION_PATH.'/configs/navigation.xml','nav');
    $container = new Zend_Navigation($config);
  
    $this->bootstrap('layout');
    $view = $this->getResource('layout')->getView();
    $view->navigation($container);
}
Now just render the menu in layout.phtml -
<body>
<h1>Learning Zend Navigation</h1>
<?php echo $this->navigation()->menu(); ?>
<?php
    echo $this->layout()->content;
?>
</body>
This will render the menu in all the pages and now we will be able to navigate to the pages using this menu.

Photobucket

The Breadcrumb....


For a simple breadcrumb lets add - did you know the term breadcrumb has originated from the story of Hansel and Gretel :P
<body>
<h1>Learning Zend Navigation</h1>
<?php echo $this->navigation()->menu(); ?>
<?php echo $this->navigation()->breadcrumbs(); // for breadcrumbs ?>
<?php
    echo $this->layout()->content;
?>
</body>

and Styling things up...


We are done with a simple navigation. But this doesn't look good. So let us do some simple styling. And the finished layout.phtml will look like this -
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning Zend Navigation</title>
    <style type="text/css">
            * {padding: 0 0; margin: 0 0; font-family: Helvetica, sans-serif;}
            .header { background-color:#DDD; }
            h1 { padding:10px; }
            .content { padding: 10px; }
            .topnav  { padding: 5px ; border-bottom:2px solid #000}
            .topnav ul , .topnav ul li { display: inline; }  
            .topnav ul li a
            {
                color: #00E;
                text-decoration: none;
                border-width: 1px 1px 0px 1px;
                border-color: #000;
                border-style: solid;
                padding: 5px;
                background: #808080;
            }
            .topnav ul li a:hover { background: #CCC; }
            .breadcrumbs { padding:10px; background:#EFEFEF; }            
        </style>
</head>
<body>
 <div class="header">
  <h1>Learning Zend Navigation</h1>
  <div class="topnav">
   <?php echo $this->navigation()->menu();?>
  </div>
 </div>
 <div class="breadcrumbs">
  <?php echo $this->navigation()->breadcrumbs();?>
 </div>
 <div class="content">
 <?php
     echo $this->layout()->content;
 ?>
 </div>
</body>
</html>
And this is what we get at this stage -

Photobucket


Looking into Advanced Zend_Navigation - Part 2

No comments: