Step 10 – Make your first library: a breadcrumb generator

Created at: December 9, 2014; Last update: July 20, 2015

(created at: December 10, last update: July 20, 2015)
What site doesn’t need a breadcrumb? Maybe those that are not user friendly…

So why not make a breadcrumb library to help us with the task of outputting a breadcrumb on our site?

We will name our library Make_bread (I tried to make the name as original as I could…). So let’s make some bread. If you are interested only in the final product, you can find it at https://github.com/avenirer/CI-breadcrumb-library

CodeIgniter libraries that don’t come with the framework are stored inside application/libraries directory. Libraries are classes that add functionalities to your framework. You could ask: Why make a library and not a helper. Make_bread will be a library because is not a simple collection of functions, but methods that work with each other.

Thinking before working

Before we get to work let’s think about what we want to accomplish. The end result of our library would have to allow us to create a breadcrumb with the “crumbs” that we provide. Also it will have to be well formed: have a container (<div> or <nav>), and have separators between the “crumbs”.

The prototype – doing the first draft of our library

To start with, let’s create a file named Make_bread.php inside application/libraries. In it we will have to write the basic format of a Codeigniter library class:

Simple, wasn’t it? Now, what do we need? Considering that we will work with links, it would be nice to use the URL helper (http://www.codeigniter.com/userguide3/helpers/url_helper.html). So let’s load it in the constructor. To load it, we can’t just use $this->load->helper(‘url’); . We must first call an instance of CodeIgniter (http://www.codeigniter.com/userguide3/general/creating_libraries.html#utilizing-codeigniter-resources-within-your-library). So, the file will now look like below:

Now, let’s put in variables what we know we will need for our breadcrumb. In my opinion, we will need:

  • a name (title) for homepage, this being the first element (crumb) of the breadcrumb;
  • the container’s opening tag;
  • the container’s closing tag;
  • the crumb’s opening tag;
  • the crumb’s closing tag;
  • the divider of the crumbs;
  • the breadcrumb itself.

If we add these, the file would change as follows:

Now, if we chose to have the first segment as the homepage, it would be a good idea to start building the breadcrumb array with that element inside the constructor:

Cool. Now what do we need? We need to put our library to work. What methods do we need:

  1. A method that adds crumbs to the breadcrumb. It will receive the title, the address (optional), and TRUE or FALSE (also optional which defaults to FALSE) if the links are going to really be crumbs. I will explain more below. So the format would be: add($title, $href = NULL , 1)
  2. A method that outputs the breadcrumb. The format would simply be output();

1. The add() method

The add() method will allow us to add “crumbs” to the breadcrumb. The method must receive at least one parameter. The first parameter must be the title of the link. As a second parameter, which is optional, the method can receive the url. Let’s allow the user to put as URL a relative path to the site. Also, if we know the breadcrumb will have, for example, the format:

First crumb: yoursite.tld
Second crumb: yoursite.tld/testing
Third crumb: yoursite.tld/testing/the_test

… let’s allow the user to just add as address parameters the segments of the URL: ‘testing‘, ‘the_test‘.

2. The output() method

The output() method will simply output the breadcrumb as a string, taking into the consideration the container and the delimiter:

Now let’s see the whole library:

Some changes to the prototype – move the configuration of the library in a separate file

Looks nice, but… There is room for improvement. Why not keeping the configuration of the library inside a config file? This way we can make sure no changes are made to the library.

So let’s create a make_bread.php file inside application/config directory. You might say “Why not inside application/config/development if we are working inside a development environment?”. My answer would be that no matter what the environment, the breadcrumb will look the same in the end.

The configuration file would have to store all the variables that can be found just before the constructor of the library. So it will look like this:

Now we will change the start of the Make_bread library so that it can fill the variables from the configuration file in the constructor:

Cool. Now, if we will need to make changes to the way the library works, we can make them inside the configuration file and leave the library alone.

The testing – Putting the library at work

Now we can test the library inside a controller. For starters, let’s do the test in the Welcome controller.

As you can see, I’ve put an echo inside the controller, killing the MVC pattern philosophy. But at least we can testify that the library worked as a charm. You can download the whole library from https://github.com/avenirer/CI-breadcrumb-library.

10 thoughts on “Step 10 – Make your first library: a breadcrumb generator

  1. rodge

    This is a very good tutorial and I really learn something. However I have a question about the breadcrumb library. How can I remove the anchor link to the last child of the breadcrumb? Is it possible also to create a breadcrumb that copies the current url and put links to every section?
    Thanks again for this wonderful tutorial.

    Reply
    1. avenirer Post author

      Thank you for your input. I actually did think about allowing the user not to add a link to the last crumb (for SEO and/or usability reasons), but when I wrote the tutorial I forgot about it. Now, thanks to you, I’ve changed the script so that, if you don’t put a link the crumb will show up without one.

      Reply
  2. rodge

    Thanks for your update. This library works fine for me. By the way, do you have a tutorial about image multi-upload with thumbnails using one input field?
    thanks!

    Reply
    1. avenirer Post author

      Just because you found a problem with my library I am going to make a tutorial about what you requested. But please give me a day or two. Thank you.

      Reply
  3. Federico

    Hi Avenir, I got an error trying to test the library…
    A PHP Error was encountered
    Severity: Parsing Error
    Message: syntax error, unexpected ‘$breadcrumb’ (T_VARIABLE)
    Filename: controllers/Welcome.php
    Line Number: 41
    Backtrace:

    Any hint? Thanks

    Reply
  4. Federico

    In many cases breadcrumbs are built using unordered list. How about adding an “active” class to the selected item list page? Thanks

    Reply
    1. avenirer Post author

      That’s what I thought. But then I thought that, according to SEO and user friendly design principles, the active page should never be a link inside the breadcrumb. So you simply don’t link it and style it accordingly (hence without needing to add another class).

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

No spam? * Time limit is exhausted. Please reload CAPTCHA.