With jQuery & CakePHP to

With jQuery & CakePHP to

World Domination

by Felix Geisendörfer

CakeFest Orlando 2008

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

ThinkingPHP.org

Blog about CakePHP

Deep inside the CakePHP core

ThinkingPHP.org

Deep inside the CakePHP core

ThinkingPHP.orgSometimes things just go wrong

World Domination

Many empires tried to achieve it

World Domination

American Empire

Persian Empire

Macedonian Empire

Mauryan Empire

Roman Empire

Arab Caliphate

Mongol Empire

Ming Empire Portuguese empire

Habsburg EmpireSpanish Empire

French Empire

British Empire

Soviet Union

Japanese Empire

Nazi Germany

American Empire

Persian Empire

Macedonian Empire

Mauryan Empire

Roman Empire

Arab Caliphate

Mongol Empire



French Empire

British Empire

Soviet Union

Japanese Empire

Nazi Germany

World Domination

American Empire

Persian Empire

Macedonian Empire

Mauryan Empire

Roman Empire

Arab Caliphate

Mongol Empire



French Empire

British Empire

Soviet Union

Japanese Empire

Nazi Germany

American Empire

Persian Empire

Macedonian Empire

Mauryan Empire

Roman Empire

Arab Caliphate

Mongol Empire



French Empire

British Empire

Soviet Union

Japanese Empire

Nazi Germany

PhpNut

&

Chuck

Norri

s

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

• No Linux version yet

• Might not scale

• No Framework yet

Jaxer: Why not?

Jaxer also works with (Cake)PHP

So let’s take over the world ...

Getting your JS included

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

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

Controller (app/controllers/posts_controller.php)

The Quick & Easy

Problems you’ll run into

Not DRY

Confusing

WTF, where does w

hat

include come from?

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

(Google “33 Lines of Magic Code”)

The Flexible

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


How to make a list of $posts available in JS


How to export your $jsonVars array to JavaScript

(put this in your layouts <head> section)


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

Commercial Break

jayDom

Microformats on steriods

Controller

View

MVC concept

ModelHTML / DOM

CSS

JavaScript

Microformats

• 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 ...

Ask audience who has heard about Microformat

jayDom Microformats

• Usually non-standardized formats, custom to your application

• Can change as your app evolves

• You are already using them

jayDom Microformat Example


Task.id Task.date


Task.time_doneTask.progress Task.time_total

Task.name

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

How to parse the encoded progress value

Task.progressAsk: Anybody who doesn’t know regex?

Writing Microformat data

Microformat snippet we are interested in

How to encode progress value of “75”

jayDom way of semantic encoding

Get:

Set:

Beats

Beats

Mapping DOM accessors

Get:

Set:

A real world example


Task.id


Task.id Task.date


Task.progress


Task.time_doneTask.progress



Task.name

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!

With jQuery & CakePHP to

Documents

Transcript of With jQuery & CakePHP to