With jQuery & CakePHP to

CakeFest Orlando 2008

With jQuery & CakePHP to

World Domination by Felix Geisendörfer

About me •

Felix Geisendörfer, 20 years old, Germany

•

Blogger / Programmer / Entrepreneur

•

Used jQuery & CakePHP in all battle fields

•

School projects, small business sites, 300++ DB table monster project

Blog about CakePHP ThinkingPHP.org

Deep inside the CakePHP core ThinkingPHP.org

Deep inside the CakePHP core Sometimes things just go wrong

ThinkingPHP.org

World Domination

World Domination

World Domination

World Domination

Many empires tried to achieve it

World Domination Persian Empire

Mauryan Empire

Soviet Union

Mongol Empire

Roman Empire Ming Empire Spanish Empire

Portuguese empire

Macedonian Empire Nazi Germany

Arab Caliphate

French Empire Habsburg Empire

Japanese Empire American Empire

British Empire

World Domination Persian Empire

Mauryan Empire

Soviet Union

& Roman Empire ut s i r r N o p Arab Caliphate h N P French Empire k c u Habsburg Empire h Japanese C Empire Mongol Empire

Macedonian Empire

Ming Empire

Portuguese empire

Nazi Germany

Spanish Empire

American Empire

British Empire

CakePHP jQuery &

Quick battle analysis

The problems

• No jQuery JS helper available • No manual on using jQuery + CakePHP • No jQuery / CakePHP framework

(except Jamal)

Why jQuery? • Embraces succinct code • Huge number of plugins out there • Plays nice with other libraries

Why CakePHP? just kidding ...

Why CakePHP? ... well actually

Jaxer: The new guy in town

• Write entire web applications in JavaScript • MySQL, SQLite, SMTP, File system access • Server process stays alive

Jaxer: Why not?

• No Linux version yet • Might not scale • No Framework yet

Jaxer also works with (Cake)PHP

So let’s take over the world ...

Getting your JS included Controller (app/controllers/posts_controller.php)

The Q uick &

View (app/views/posts/index.ctp)

Layout (app/views/layouts/default.ctp)

Easy

Problems you’ll run into

Not DRY

Not DRY

Confusing t a h w s e o ? d m e o r r e f h e w m , F o T c W lude c n i

How to KISS this?

• Have a central place to define JS includes • Only one reference to each JS file • Simple rules for inclusion on a per action basis

Rule based JS inclusion app/config/js_includes.php (custom approach, not in cake core!)

The inclusion rule parser e l b i x e l F e h T (Google “33 Lines of Magic Code”) Will talk about this in tomorrows talks

Automatic JS inclusion • If “app/webroot/js/views/layouts/{layout}.js” exists -> load it

• If “app/webroot/js/views/{controller}/{view}.js” exists -> load it

Getting controller data to JS

Yummy function for your AppController

Getting controller data to JS

How to make a list of $posts available in JS

Getting controller data to JS (put this in your layouts section)

How to export your $jsonVars array to JavaScript

Getting controller data to JS

How to access jsonVars in JavaScript

World Domination

PostTask.com • Personal time management • Next step: Becoming the best project management tool

• After that: World Domination m m Co

k a e r B l a i c r e

jayDom Microformats on steriods

MVC concept Model

View

Controller

HTML / DOM CSS JavaScript

Microformats

Ask audience who has heard about Microformat

• A collection of standardized HTML snippets

• Can be parsed by spiders, making your site semantic in a way thats actually useful

• Examples: hCard, rel-license, adr, geo ...

jayDom Microformats • Usually non-standardized formats, custom to your application

• Can change as your app evolves • You are already using them

jayDom Microformat Example

jayDom Microformat Example

Task.id

Task.date

jayDom Microformat Example Task.name

Task.progress

Task.time_done

Task.time_total

Microformat I/O • In order to read data from our

microformat, we need to parse it

• If we want to update our data we also need to be able to write to the microformat

Reading Microformat data Microformat snippet we are interested in

Task.progress Ask: Anybody who doesn’t know regex?

How to parse the encoded progress value

Writing Microformat data Microformat snippet we are interested in

How to encode progress value of “75”

Writing Microformat data Microformat snippet we are interested in

How to encode progress value of “75”

jayDom way of semantic encoding Get:

s t a e B Set:

s t a e B

Mapping DOM accessors

Get: Set:

A real world example

jayDom Microformat Example

Task.id

jayDom Microformat Example

Task.id

Task.date

jayDom Microformat Example

Task.progress

jayDom Microformat Example

Task.progress

Task.time_done

jayDom Microformat Example

Task.progress

Task.time_done

Task.time_total

jayDom Microformat Example Task.name

Task.progress

Task.time_done

Task.time_total

World Domination

jQuery Selectors on steriods Select all tasks with the name ‘New Task’

Select all tasks that are more then half done

jQuery Selectors on steriods

• Find all Posts • That have at least one Comment written by Felix

• Only return posts that visible (not hidden)

Easy Ajax

jayDom Advantages • Put your semantics to use • Save tons of bandwidth on server calls using JSON

• Hassle-less client server communication

Questions • Thanks for listening • Thanks for helping the CakePHP project grow

Slides will be available on ThinkingPHP.org shortly!