Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flexible site structure with CakePHP

Andy Gale
September 01, 2012

Flexible site structure with CakePHP

A talk given at CakeFest 2012 explaining the method used to create T3.com using CakePHP and a flexible site structure.

Andy Gale

September 01, 2012

More Decks by Andy Gale

Other Decks in Programming


  1. Flexible site structure with CakePHP Andy Gale www.andy-gale.com Wednesday, 29

    May 13
  2. T3 A gadget, technology and lifestyle magazine Wednesday, 29 May

  3. T3 Internationally licensed... Wednesday, 29 May 13

  4. T3 Pioneering interactive iPad magazine Wednesday, 29 May 13

  5. T3 Future Publishing • A popular title on Zino -

    an online publishing platform www.zinio.com • Also a popular UK website destination for gadget fans www.t3.com Wednesday, 29 May 13
  6. T3 Future Publishing • Flagship brand for Future Publishing •

    T3 Awards being an important part of the UK calendar • Many competitors - online, blogs such as Engadget and Gizmodo • Quick-to-publish vital on gadget websites Wednesday, 29 May 13
  7. T3 - Just use Drupal or Wordpress! • Many Future

    websites now in Drupal or Wordpress www.pcgamer.com www.netmagazine.com • Pressflow (a distribution of Drupal) is an excellent platform for publishing websites pressflow.org • Drupal and Pressflow with Varnish scales www.varnish-cache.org Wednesday, 29 May 13
  8. T3 - Just use Drupal or Wordpress? • No need

    to build another CMS? • But the site editors had unique requirements for their workflow Wednesday, 29 May 13
  9. Easy to update trending and ticker Editable custom content boxes

    Popular list features need to be fast and easy to create Wednesday, 29 May 13
  10. Various different types of galleries including super galleries! Wednesday, 29

    May 13
  11. Flexible site structure • Obviously, articles, galleries, other lists of

    content are stored in database • We also stored the site structure in the database using the Tree behaviour. Wednesday, 29 May 13
  12. Editable custom content boxes Wednesday, 29 May 13

  13. Elements CREATE TABLE elements ( ! id INTEGER(10) UNSIGNED NOT

    NULL AUTO_INCREMENT, ! name VARCHAR(255) DEFAULT '', ! PRIMARY KEY (id) ); Model: Name field, just the filename of a CakePHP element <div> <h3>Latest</h3> <ul> <li><a href="/news/iphone5red">iPhone 5 actually Red</a></li> <li><a href="/news/iphone5blue">iPhone 5 to Blue</a></li> </ul> [children] Wednesday, 29 May 13
  14. SiteObject id: 1 name: Latest smartphone news type: ContentBox element_id:

    1 content_id: 50 Element id: 1 name: content_boxes/list.ctp SiteObject id: 50 name: Latest smartphone news list type: List SiteObject id: 51 type: List parent_id: 50 article_id: 1 Article id: 1 name: Black Samsung Galaxy S3 coming soon Article id: 2 name: Motorola RAZAR Ice Cream Sandwich update out now SiteObject id: 52 type: List parent_id: 50 article_id: 2 SiteObject id: 53 type: List parent_id: 50 article_id: 3 Article id: 3 name: Supposed Apple iPhone 5 motherboard hints at features Wednesday, 29 May 13
  15. SiteObject id: 1 name: Samsung Galaxy Note 2: Hands On

    type: ContentBox element_id: 2 article_id: 4 Element id: 2 name: content_boxes/hero.ctp Article id: 4 name: Black Samsung Galaxy S3 coming soon Hero article content box Wednesday, 29 May 13
  16. Tree Behaviour <body> id: 1 left: 1, right: 10 <header>

    id: 2 parent: 1 left: 2, right: 7 <nav> id: 4 parent: 2 left: 5, right: 6 <h1> & logo id: 3 parent: 2 left: 3, right: 4 <main> id: 5 parent: 1 left: 8, right: 13 <aside> id: 7 parent: 5 left: 11, right: 12 <article> id: 6 parent: 5 left: 9, right: 10 book.cakephp.org/1.3/en/view/1339/Tree Wednesday, 29 May 13
  17. So what about the structure? All page elements were grouped

    together as different types of “site object” CREATE TABLE site_objects ( ! id INTEGER(10) UNSIGNED NOT NULL AUTO_INCREMENT, ! parent_id INTEGER(10) UNSIGNED DEFAULT NULL, ! lft INTEGER(10) UNSIGNED DEFAULT NULL, ! rght INTEGER(10) UNSIGNED DEFAULT NULL, ! name VARCHAR(255) DEFAULT '',! ! page_id INTEGER(10) UNSIGNED DEFAULT NULL, ! article_id INTEGER(10) UNSIGNED DEFAULT NULL, ! element_id INTEGER(10) UNSIGNED DEFAULT NULL, ! content_id INTEGER(10) UNSIGNED DEFAULT NULL, ! PRIMARY KEY (id) ); Page CREATE TABLE pages ( ! id INTEGER(10) UNSIGNED NOT NULL AUTO_INCREMENT, ! name VARCHAR(255) DEFAULT '',! ! title VARCHAR(255) DEFAULT '',! ! meta_description TEXT DEFAULT ! meta_keywords TEXT DEFAULT NULL, ! name VARCHAR(255) DEFAULT '',! ! url VARCHAR(255) DEFAULT '',! ! PRIMARY KEY (id) ); Wednesday, 29 May 13
  18. URLs • The structure of each “Page” or URL was

    defined in a tree • /news takes you to the page structure for news articles • /news/new-iphone5-released takes you to the page structure associated with the new articles that has the slug “new-iphone5-released” allowing different layouts for articles from trades shows Wednesday, 29 May 13
  19. Content? • element_id field contains a reference to the element

    that should be used to display this content • content_id field in SiteObject refers to another SiteObject which contains information about where to find the content • That content could be a list of articles, images, a carousel... anything that the site supports Wednesday, 29 May 13
  20. Content? • Backend process updates lists periodically • Key lists

    such as the homepage lists of articles are updated whenever articles change • Allows easy updating of caching. See: andy-gale.com/positive-cache-clearing-with-cakephp.html Wednesday, 29 May 13
  21. Caching!!!!!! • Caching vital when implementing a site using this

    methodology • Structure and content both SiteObjects can be cached in the same way • Caching need to be updated fast to ensure new articles were published as soon as possible Wednesday, 29 May 13
  22. Caching CMS ActiveMQ Cache update sent as a topic via

    STOMP protocol Web server Web server Web server Multiple clients can subscribe to a topic so all web servers that are listening can update their cache immediately and serve new content Wednesday, 29 May 13
  23. CSS, elements and flexible Structure • Consistent CSS style guide

    for each component vital for implementing a flexible site structure • Elements should work wherever they are placed • Twitter Bootstrap is a great example twitter.github.com/bootstrap/ Wednesday, 29 May 13
  24. Flexible site structure with CakePHP • Code to be released

    on my GitHub page shortly: github.com/salgo/ • Avoiding Surprises with Chef and Vagrant Attend if you’ve ever had problems with configuration or anything else when putting sites live Wednesday, 29 May 13
  25. Flexible site structure with CakePHP • Questions? • @andygale on

    Twitter • andy-gale.com on the Web Wednesday, 29 May 13