CakePHP - Using Helpers

What Will I Learn?

You will learn Using Helpers in CakePHP

Requirements

CakePHP 3.5 https://cakephp.org/

Difficulty

Intermediate

Curriculum

CakePHP - Building Your First Site

CakePHP - Using Helpers

Today, we will be building on our code from the last tutorial. We will be using some cool features of Cake to streamline and style our code.

CakePHP has a lot of power behind it, and most of it comes from providing easy ways to do common tasks. This makes Cake a powerful tool not only speed wise, but in convenience as well. With a ton of topics to tackle, we will start with something you will be using all the time: helpers.

Helpers in Cake are used on the view level and provide easy ways to output things to the page. The most common of which would be the ever-so-popular HTML helper. This helper does exactly what it sounds like, it helps output nicely formatted HTML tags. Tables, divs, and the like are all represented in this helper, all we have to do is include it in our controller. Once it is included, you can use it in the corresponding views.

To do this, you will need to open your controller, in this case the products_controller.php file, which will be located in the cake_directory/app/controllers/ directory. Once you open up the file, all you have to do is add a $helpers variable to the class, which is an array of helper names to include for use in the current controller's views. After adding the variable, your products controller will look as such:

class ProductsController extends AppController
{
  var $name = "Products";
  var $helpers = array('Html');
  

  function index()
  {
    $data = $this->Product->find('all');
  
  
    $this->set('data', $data);
  }
}

You will notice that there is only the one change. For this tutorial, you need not do anything else different in the controller. To use our helper, we need to open our index view, or index.ctp located in cake_directory/app/views/products/. This file is going to be completely rewritten, so to get started, I will go over what our view will be.

We will be using the same array full of data, we are just going to make it look a little nicer, and customize it a bit. The first thing we need to do is use a table to present our data. This is where Cake begins to taste good, because all we have to do to use our helper is reference the variable it is. In the case of our HTML helper, we use the variable $html. This variable is a copy of the HTML helper class, and thus gives us access to the functions therein.

So, to start we will make our table. The helper has no method for the actual <table> tag, so we will have to do that ourselves. Before and after your opening PHP tags, just go ahead and add them. It should look like so:

<table>

<?php?>

</table>

For the PHP part, we are going to use two methods, tableHeaders and tableCells. With these two methods you can do a heck a lot, but like everything else, they have limits. For now they will do just fine. First we need our table headers. To start we call the method $html->tabelHeaders(), which takes in a couple arguments, but for now all we need to give it is an array full of header strings. Your code should be:

<table>

<?php 

echo $html->tableHeaders(

  array(

  'Product ID',

  'Product',

  'Description',

  'Price'

  )

);

?>

</table>

As you can tell, it is extremely simple. Just an array of strings, and since we are using our table data, the headers are just easy-to-read versions of our columns. This will output a blank table with some headers, but there is actually not much more to do in order to output our data as well, so lets just go ahead and do that.

So we have two records, technically all of the records, but that is just two for now. What we need to do is loop through our $data array, and for each record use the tableCells method to spit out our table rows. This method takes a multi-dimensional array, which at some points can be confusing. For this tutorial, it will be pretty simple. The first array encompasses everything. The array inside the first represents a table row. The table row array can take in two things: strings of table data, or arrays of table data. To keep things simple, for now we are going to be using just straight strings. To make things easy, your code will look like:

<table>

<?php 

echo $html->tableHeaders(

  array(

  'Product ID',

  'Product',

  'Description',

  'Price'

  )

);

foreach($data as $product)

{

  echo $html->tableCells(

  array(

  array(

  $product['Product']['product_id'],

  $product['Product']['product_name'],

  $product['Product']['product_desc'],

  $product['Product']['product_price']

  )

  )  

  );

}

?>

</table>

Our foreach takes the $data variable, and iterates through it. If you recall our array structure:

Array

(

  [0] => Array

  (

    [Product] => Array

    (

      [product_id] => 1

      [product_name] => Product 1

      [product_desc] => This is a description for product 1.

      [product_price] => 10

    )

  )

  [1] => Array

  (

    [Product] => Array

    (

      [product_id] => 2

      [product_name] => Product 2

      [product_desc] => This is a description for product 2.

      [product_price] => 6

    )

  )

)

You will notice that our product data is in an array on its own. This base structure forces us to dig in each element in our foreach loop. This is why we use $product['Product']['product_id'] rather than just $product['product_id']. This is just how the default data array is setup in Cake. For now, we can live with that.At this point, we have a nice table with our data. The table looks nice with the default style, but what about something a little more SOTC? Adding style sheets is pretty simple, especially when you are using the HTML helper. First, however, you need to create the stylesheet:

table

{

  border-collapse: collapse;

}

th

{

  background-color: #00A300;

  color: #ffffff;

}

tr

{

  background-color: #D4FFA8;

  border-top: 1px solid #000000;

  border-bottom: 1px solid #000000;

}

Once you get it made up, save it in the cake_directory/app/webroot/css/ folder. The webroot folder is used for CSS, Javascript, and images, so get used to this directory. When the file is all snug in its new home, we have to include it in the header of the html. Doing this in Cake is really quite simple, you call the css method in the html helper. The final view code will look like this:

<?php

echo $html->css('default');

?>

<table>

<?php 

echo $html->tableHeaders(

  array(

  'Product ID',

  'Product',

  'Description',

  'Price'

  )

);

foreach($data as $product)

{

  echo $html->tableCells(

  array(

  array(

  $product['Product']['product_id'],

  $product['Product']['product_name'],

  $product['Product']['product_desc'],

  $product['Product']['product_price']

  )

  )

  );

}

?>

</table>

In this case, the css method takes in one argument, the name of the css file to include. If you look at the page now you should see a couple nice green tables, one of which is our products table.

SOTC Styled Data Tables

That is pretty much the basics of Cake helpers. You have a lot more in the HTML helper, and of course a lot more helpers, but that is basically how they are all used. Helpers, well.....help you do just about anything, from including css files to making complex AJAX calls.  

---

Posted on Utopian.io - Rewarding Open Source Contributors

---