Warning: Illegal string offset 'name' in /nfs/c01/h08/mnt/5257/domains/cwcage.com/html/blog/wp-content/plugins/genesis-simple-sidebars/plugin.php on line 105

Warning: Illegal string offset 'description' in /nfs/c01/h08/mnt/5257/domains/cwcage.com/html/blog/wp-content/plugins/genesis-simple-sidebars/plugin.php on line 107
Begining to Design with CakePHP | CW Cage

Begining to Design with CakePHP

After reviewing several pages of the CakePHP intro documentation, here are my summary notes on some basics for designing a site built with CakePHP.

First, understand a little about the Model View Controller (MVC) concept.

  • Model layer (business logic)
    • retrieves data and converts it into something meaningful for the application
    • the major concepts of the application
  • View layer (presentation)
    • rendering – HTML, XML, text or whatever format the output needs to be in (video, audio, documents, etc.)
    • This is where build our template
  • Controller layer (handles requests from users)
    • looks at the task being requested and delegates to the correct workers
    • delegates data fetching or processing to the Model
    • delegates rendering process to the View

The Folder Structure

  • The app folder is where our applications files are located.
  • The lib is Cake’s core. Don’t mess with these files.
  • vendors is where third-party libraries go

The App Folder

The main areas we need to get into for design purposes are:

  • /app/View/ = the CakePHP files; elements, error pages, helpers, layouts and view files
  • /app/webroot/ = this is the document root of the application. Folders inside hold CSS, images and JS files

CakePHP Conventions

Cake has some basic conventions for how folders and files are named. Basically, the names of the folders and files in the Views directory match up with the names of Controllers.

Some basics:

  • Controllers are CamelCased and plural, such as “RedApplesController”
  • The name of the controller maps to the URL used to access the controller and can be accessed in a variety of forms
    • suggested convention converts CamelCased to separated_with_underscores: http://example.com/red_apples
    • These also work:
      • /RedApples
      • /redApples
      • Red_apples

View Conventions

View template files are named after the controller functions they display – in an underscored form

  • The “getReady()” function of the PeopleController class will look for a view template in /app/View/People/get_ready.ctp
  • The basic pattern is /app/View/Controller/underscored_function_name.ctp.

Here’s an example that shows the naming of all the different elements that come together:

  • Database table: “people
  • Model class: “Person”, found at /app/Model/Person.php
  • Controller class: “PeopleController”, found at /app/Controller/PeopleController.php
  • View template, found at /app/View/People/index.ctp

Using these conventions, CakePHP knows that a request to http://example.com/people/ maps to a call on the index() function of the PeopleController, where the Person model is automatically available (and automatically tied to the ‘people’ table in the database), and renders to a file. None of these relationships have been configured by any means other than by creating classes and files that you’d need to create anyway.

Views Documentation

Parts of Views

  • Views - the unique part of the page
  • Elements - reusable bits
  • Layouts - files that will wrap many interfaces. This sounds like what will contain header/footer code
  • Helpers - encapsulate view logic that is needed in many places. Things like form elements, pagination, RSS feeds

View Blocks

Blocks = a slot defined elsewhere that can be inserted into a view. Used for commons elements such as sidebars, or footer & header blocks. Use blocks for Script and CSS files

HTMLHelper (class) - important info here

This is supposed to make HTML-related options easier and faster. Is available in all views.

  • HtmlHelper creates well formed markup.
  • Use PHP echo statements instead of writing full HTML

There are a bunch of different calls you can make to pull different HTML elements. Everything from calling CSS files to outputting an image. We will need to review the documentation for specific needs. Here are a couple of examples:

Images: There are several options on how to output images. This is the basic. this:

echo $this->Html->image('cake_logo.png', array('alt' => 'CakePHP'));

outputs:

<img src="/img/cake_logo.png" alt="CakePHP" />

Things like CSS classes are defined as an option in the array. For instance, to add a class to a link… this:

echo $this->Html->link('Enter', '/pages/home', array('class' => 'button', 'target' => '_blank'));

outputs:

<a href="/pages/home" class="button" target="_blank">Enter</a>

Layouts – /app/Views/Layouts

This is the code that wraps around a view. Anything you want to see in ALL of your views should be placed in a layout

  • Default layout is /app/View/Layouts/default.ctp

Fetch Content method

$this->fetch(‘content’) This method pulls back the content of whatever view is using the layout. Each layout should have this.

The “Flash” layout

The flash layout is used for messages shown by the “Controller::flash()” method This is for messages like error, info, success. There are custom layouts for these in the Cakestrap theme. I think the flash layout is also an Element.

Elements

The reusable parts (small blocks of presentation code) like menus, login forms, help boxes.

Code like this:

 echo $this->element('flash/info', array("message" => "Hello y'all. I'm testing. This is an info box."));

Will look for the info.ctp file inside of /Elements/flash and then replace the “$message” variable with the text in double quotes.

Themes

Themes “make it easy to switch the look and feel of your page”. We may not really need to use themes. I’m not sure there’s a benefit to using a theme rather than editing the master view files.

  • You set the them inside the controllers. The basic setting seems to be in the AppController.php.
  • Do this: class AppController extends Controller {
    public $theme = “Cakestrap”;
    }
  • Put the name of your theme (folder name) where “Cakestrap” is.  The theme folder needs to be in /app/View/Themed/ThemeName/’ Within your theme folder, keep the folder structure the same as in /app/View/
  • You can change the theme dynamically in a number of ways. I doubt we will be doing that much, but I’m sure there are ways we might want to use that feature (change theme per user role?)