Famous Internet Programmer

Posts Tagged ‘cakephp helper menu php programming’

I’ve been working on a new project and have been moving a lot of my programming to the cakephp framework.

I needed a menu that was dynamic I wanted it to show the Login and Register Buttons when someone is not logged in and just the oppisite when they are logged in I want to show the Logout and MyAccounts button.

I found that the best way to do this is to create a helper to display the menu.

To accomplish this we need to build our files.

We are going to use a componet to house the basic menu.

This will go in the /apps/controllers/components/menu.php

——————————————————————

<?php
class MenuComponent extends Object {
    var $components = array(‘Session’);
 
    function startup() {
         
        $user = $this->Session->read(‘User’);
 
        //menus array
        $menus = array();
        $menus[__('Home', true)] = ”;
        $menus[__('Twitter Accounts', true)] = ‘accounts/view’;
        $menus[__('RSS Your Tweets', true)] = ”;
        $menus[__('Tweet Scheduler', true)] = ”;
       
        if (!$this->Session->check(‘User’)){
            $menus[__('Register', true)] = ‘users/register’;
            $menus[__('Login', true)] = ‘users/login’;
        }else{
            $menus[__('MyAccount', true)] = ‘users/account’;
            $menus[__('Logout', true)] = ‘users/logout’;       
        }
        $this->Session->write(‘Menu.main’, $menus);
    }
}
?>

——————————————————————-

Basically this creates an array of your menu and saves it to the current session. Also included are the language hooks incase you want to display this in a different language.

Next we need to build our helper. The helper will go in the

/apps/views/helpers/menu.php

——————————————————————–

<?php
/**
 * Dynamic menu  helper library.
 *
 * Methods to render dynamic menu .
 */
class MenuHelper extends AppHelper {
 
    var $helpers = array(‘Html’);
 
    /**
     * Render  menu from session variable array.
     * Top item of the array is menu caption and div id
     * Sub items are  menu items caption and link to the location, or array of subitems.
     *
     * @param array $menu Name of the session variable that stores menu array.
     * @static
     */
    function render($menu = null) {
        $out = ”;
       
        foreach($menu as $caption => $link) {
            $out = $out.’<li><a href=”‘.$this->webroot.$link.’” target=”_self” title=”‘.$caption.’”><span>’.$caption.’</span></a></li>’;
        }
        $out = ‘<ul>’.$out.’</ul>’;
        $out = $this->Html->div(‘menu’, $out);
        return $out;
    }
}
?>

———————————————————————————————————-

The helper parses the array and builds the menu structure.

Next we need to add the following to our apps_controller.

/cake/libs/controller/app_controller.php

You need to make sure that our helper and our component are available to all of our pages.

The code will look similar to this:

class AppController extends Controller {
    var $helpers = array(‘Form’,'Javascript’,'Html’,'Menu’);
    var $components = array(‘Menu’);
}

You will need to add the following line to your /apps/views/default.php

<?php echo $menu->render($session->read(‘Menu.main’)); ?>

This will call the render function in the helper and display the menu.

Now in order for the menu  to look right you will need images and a CSS stylesheet for the menu.

Remember in CakePHP you place your .CSS files in the apps/webroot/css directory.

to include that into your page you need to use the cake html function.

Like this:

<?php echo $html->css(‘style’); ?>

The CSS file will need the following:

.menu {
    float:left;
    background:#FFFFFF;
    height: 27px;
    width: 901px;
    position: absolute;
    left: 204px;
    top: 213px;
    font-size:93%;
    line-height:normal;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-right-style: none;
    border-bottom-style: solid;
    border-left-style: none;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
    }

.menu ul {
    margin:0;
    padding:0px 0px 0 3px;
    list-style:none;
    }
.menu li {
    display:inline;
    margin:0;
    padding:0;
    }
.menu a {
    float:left;
    background:url(“../img/tableftF.gif”) no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    }
.menu a span {
    float:left;
    display:block;
    background:url(“../img/tabrightF.gif”) no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#666;
    }
   
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.menu a span {float:none;}
/* End IE5-Mac hack */
.menu a:hover span {color:#FFFFFF;}
.menu a:hover {background-position:0% -42px;}
.menu a:hover span {background-position:100% -42px;}

All that is left is you will need the following two images and place them in the /apps/webroot/img directory.

Image 1

Image 2

That’s it…

If you like this please leave a comment. It helps to motivate me to share other great tips.

Technorati Tags: cakephp helper menu php programming