A web developer and startup enthusiast from Iran with a solid background in front-end and back-end development, which is what he's been doing for over ten years. He follows two major principles in his everyday work: beauty and simplicity. He believes everyone should learn something new every day.

Reza's articles

  1. Dynamic Menu Builder for Bootstrap 3: Item and Link

    This entry is part 2 of 2 in the series Dynamic Menu Builder for Bootstrap 3

    In part 1, we prototyped the end product and wrote the main Menu class, which serves as the menu manager – a container to hold all sub-units (items and links). In this part, we’ll build the remainder of the classes and demonstrate the menu builder’s usage.

    Item

    Represents our menu items as independent objects.

    Create a new file called item.php and paste in the following code:

    item.php

    <?php
    class Item {
    
        protected $manager;
        protected $id;
        protected $pid;
        protected $meta;
        protected $attributes = array();
    
        public    $link;
    
        //...
    ?>
    • $manager stores a reference to the menu manager (Menu object). This makes us able to use menu manager methods within Item context.
    • $id stores the item’s id.
    • $pid stores item’s parent id if it has one otherwise it’ll be set to null.
    • $meta an array for storing extra data with each item.
    • $attributes an array of HTML attributes.
    • $link stores an instance of class Link.

    __construct(manager, title, url, attributes, pid)

    Initializes the attributes.

    <?php
    public function __construct($manager, $title, $url, $attributes = array(), $pid = 0)
    {
        $this->manager     = $manager;
        $this->id          = $this->id();
        $this->pid         = $pid;
        $this->title       = $title;
        $this->attributes  = $attributes;
    
        // Create an object of type Link
        $this->link        = new Link($title, $url);
    }
    ?>

    add(title, options)

    Class Item has an add() method as well (just like the menu manager). In fact this method doesn’t create items on its own. It gets the arguments, adds a pid key to $options and calls add() of the menu manager.

    <?php
    public function add($title, $options)
    {
        if( !is_array($options) ) {
                $options = array('url' => $options);
            }
    
        $options['pid'] = $this->id;
    
        return $this->manager->add( $title, $options );
    }
    ?>

    This gives us the power to create sub items in a more semantic way rather than explicitly defining a pid:

    <?php
        $menu = new Menu;
    
        $about = $menu->add('About', 'about');
    
        // We write it this way
        $about->add('What we do?', 'what-we-do');
    
        // instead of:
        // $menu->add('What we do?', array('url' => 'what-we-do', 'pid' => $about->get_id()));
    ?>

    id()

    Generates a unique id for the Item. We use this identifier to refer to the item later.

  2. Dynamic Menu Builder for Bootstrap 3: Menu Manager

    This entry is part 1 of 2 in the series Dynamic Menu Builder for Bootstrap 3

    Creating menus and navigation bars has never been easier than with Twitter Bootstrap. We can easily create stylish navigation bars without too much effort. While it’s enough for some projects, you might encounter situations when you need to have more control over the links and items inside your menu.
    Imagine you need to load the items from a database table. What if you need to limit the items to a group of users having the required permissions?
    This is where static solutions can’t help much, so, we should think of a more dynamic approach.

    In this tutorial I’m going to show you how to create your own dynamic menu builder in PHP. This is a two part series, with the first part focusing on demo code and the Menu class, and the second part taking care of the other classes and usage examples.

    Defining The Goal

    Before we start, let’s briefly outline what we need to accomplish. Personally I like to get more with writing less and I’m sure you do as well.

    We should be able to create menus the easy way, but the code should stay clean and professional, written in modern object oriented style, like so:

    <?php
    
    //create the menu
    $menu = new Menu;
    
    //Add some items
    $menu->add('Home', '');
    $menu->add('About', 'about');
    $menu->add('Services', 'services');
    $menu->add('Portfolio', 'portfolio');
    $menu->add('contact', 'contact');
    
    ?>

    We should be able to add sub items in a semantic way rather than explicitly defining a pid for each sub item:

    <?php
    //...
    $about = $menu->about('about', 'About');
        $about->add('Who we are?', 'who-we-are');
        $about->add('What we do?', 'what-we-do');
    //...
    ?>

    We should provide a way for adding HTML attributes to the items:

    <?php
    //...
    $menu->add('About', array('url' => 'about', 'class' => 'about-li active', 'id' => 'about-li'));
    //...
    ?>

    Wouldn’t it be fantastic if we could easily append or prepend some content to the anchors like a caret symbol or a graphical icon?