Modifying the CakePHP Bakery Templates

One of the keys to a successful website is a good user flow especially when leveraging jQuery template.  What defines a good user flow?  At the very core, it requires simple navigation, being able to find what you’re looking for, and being able to do it quickly.  CakePHP’s bakery let’s you quickly create websites that list, add, edit, and delete data.  All you need to do is create a database table and run a few simple bakery commands and this will be done for you.

The basic templates provided are pretty good.  They include links to do all of the above as well as pagination and sortable headers on the table listing page.  I find them a little bland and very “techie”.  Most customers don’t like this, so let’s alter them to suit are needs.

The first thing we need to know is: where are the files for the bakery?  There are four view templates located here that are used when creating pages: cake\console\templates\default\views

1. form.ctp – this contains the add and edit forms HTML

2. home.ctp – this contains the home page HTML that you see when you don’t have a default one (not really needed)

3. index.ctp – this contains the table list page with pagination and sortable headers HTML

4. view.ctp – this contains the view of one record HTML

I usually begin with the index.ctp because this is where the process begins, the listing page.  The first thing I change with this one is the pagination links.  I like them a little bit cleaner than the default one.  To do this, look for this code:

[code]<p>
<?php echo “<?php
echo \$this->Paginator->counter(array(‘format’ => __(‘Page %page% of %pages%, showing %current% records out of %count% total, starting on record %start%, ending on %end%’, true)));
?>”;?>
</p>[/code]

Alter/add as required to suit your needs, I normally strip out every after the second comma with the starting on…

The next thing I like to do is to not show a blank table.  There are two reasons behind this, I really dislike seeing a table with no rows and just the header and the second reason is that it seems the pagination message looks weird in that it would say page 1 of 0. If you’re looking to get fancy check out this article on Organizing data with the jQuery Sortable plugin.

To do this, add the following code above the opening table tag (approximately line 22):

[code]<?php
echo “<?php if (\${$pluralVar}):?>”;?>[/code]

You will then need to end the if (no pun intended) further down, around line 79 after the end div tag for the “paging” class, but before the final end div:

[code]<?php echo “<?php else:?><p>There are currently no records to display.  <?php echo \$this->Html->link(__(‘Add one now’, true), array(‘action’ => ‘add’)); ?></p>
endif;?>”;?>[/code]

Now if there are no records to display, we will see the above message and no empty table or needless pagination links.

Depending on your determined website design, this is also a great opportunity to move links around or add any generic CSS to your tables, links, titles, etc… that will be styled later.

I’ll let your imagination take it from here.  Enjoy!