Part 5: Adding menus using Zend_Navigation – A not so quick quickstart to Zend Framework

Posted by admin | Posted on 15-09-2010

Category : Programming

Tags: ,

This new part of our series will present how to use Zend_Navigator. We will add navigation menus in our project (“zfguide” ). We will divide this part in three steps: I) creating the menu configuration file; II) Bootstraping Zend_Navigator; and III) Integrating the menu with the layout.

Step I: Creating the menu configuration file

The Zend_Navigator offers different to generation the navigation links (you can find more details here), however in this tutorial we will use a xml configuration file to define our menu. To do that, create a file called navigation.xml in /applications/configs with the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?xml version="1.0" encoding="UTF-8"?>
<configdata>
    <nav>
       
        <home>
            <label>Home</label>
            <controller>index</controller>
            <action>index</action>
        </home>
       
        <user>
            <label>Users</label>
            <controller>users</controller>
            <action>index</action>
           
            <pages>
                <list>
                    <label>List</label>
                    <controller>users</controller>
                    <action>index</action>
                </list>
                <add>
                    <label>Register</label>
                    <controller>users</controller>
                    <action>register</action>
                </add> 
            </pages>           
        </user>            
                       
    </nav>
</configdata>

In this XML configuration file, we have basically added the labels for each menu item and the controller and action that the link will point to.

Step II: Bootstraping Zend_Navigator

Now that we have defined the menu, let’s open the file Bootstrap.php and initialize the navigation. So, open the file and add the following function:

1
2
3
4
5
6
7
8
9
10
protected function _initNavigation() {
    $this->bootstrap("layout");
    $layout = $this->getResource('layout');    
    $view = $layout->getView();
                   
    $config = new Zend_Config_Xml(APPLICATION_PATH . '/configs/navigation.xml','nav');
    $navigation = new Zend_Navigation($config);
   
    $view->navigation($navigation);
}

By doing this, your application is now ready to display the menu.

Step III: Integrating the menu with the layout

The last step is to add the menu to the layout. So, open the file application/layouts/scripts/layout.phtml and add the following inside the div which id is header:

1
2
3
<div class="topnav">
    <?php echo $this->navigation()->menu()->setMaxDepth(1); ?>
</div>

Now we have a navigation menu in the project

Another interesting feature that makes use of Zend_Navigation is a helper that creates breadcrumbs (a full “paths” to the current page). This is very simple to use, just add the following code to the layout.phtml:

1
2
3
4
5
6
<div class="breadcrumbs">
    <?php echo $this->navigation()->breadcrumbs()
                            ->setMinDepth(0)
                            ->setLinkLast(true)
                            ->setSeparator(" &gt; "); ?>
</div>

Simple, isn’t it ? To conclude, let’s have a look at the final version of the layout.phtml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php echo $this->doctype(); ?>
<html>
    <head>
        <?php echo $this->headTitle(); ?>
        <?php echo $this->headMeta(); ?>
        <?php echo $this->headLink(); ?>
        <?php echo $this->headLink()->appendStylesheet($this->baseUrl() . '/styles/default.css'); ?>
        <?php echo $this->headScript(); ?>
    </head>
    <body> 
        <div id="header">                                                      
            <h1>ZF Basics</h1>
               
            <div class="topnav">
                <?php echo $this->navigation()->menu()->setMaxDepth(1); ?>
            </div>
           
            <div class="breadcrumbs">
                <?php echo $this->navigation()->breadcrumbs()
                                    ->setMinDepth(0)
                                    ->setLinkLast(true)
                                    ->setSeparator(" &gt; "); ?>
            </div>
                           
        </div>             
        <div id="content">
            <?php echo $this->flashMessages(); ?>              
            <?php echo $this->layout()->content; ?>
        </div>     
    </body>
</html>

That’s it for today. I hope you have found it useful. In the next part of our series we will describe how to implement automated tests to our application by using Zend_Test and PHPUnit.

Popularity: 30% [?]

Related posts:

  1. Part 2: Creating your project – A not so quick quickstart to Zend Framework
    In this second part (click here to check the previous part) of this series we...
  2. Part 4: Creating and using forms – A not so quick quickstart to Zend Framework
    In the previous parts, we have seen how to setup the environment (Part 1), start...
  3. Part 3: Creating the model, database and retrieving values from them – A not so quick quickstart to Zend Framework
    In the 3rd part of our series, we will now start implementing a user’s management...
  4. Part 1: Setting Up – A not so quick quickstart to Zend Framework
    Welcome to a series of tutorials to introduce the most important features of Zend Framework....
  5. How to setup Apple’s Mail.app to have a great integration with Gmail
    Gmail is an excellent webmail. It has great features, brilliant performance and amazing usability. However, there...