CakePHP AJAX Implementation

1
CakePHPAJAX Implementation
Pallavi RajasekaranCS549 Spring 07
2
WEB SERVER
request for /tasks/index
Response
7
Request
1
TasksController
Layout
tasks_controller.php
tasks.thtml
Index Method
ToDo Method
Tasks Index View
Index Method Called
2
Index View selected
5
View combined with layout
Done Method
Undo Method
6
Tasks Index View
Tasks Index View
Views
index.thtml todo.thtml done.thtml
Data Requested
3
Data returned
4
Model Task task.php
DATABASE
Table tasks
3
Table tasks
CREATE TABLE tasks( id INT
UNSIGNED NOT NULL, title VARCHAR(255)
NOT NULL, done TINYINT(1), created
DATETIME, modified DATETIME, PRIMARY KEY (id)
)
4
Model File app/models/task.php
'Task' var scaffold ?
5
Divisions in app/views/tasks/index.thtml
id"add_task div
6




7
Controller app/controllers/tasks_controller.php
AppController var name 'Tasks' var
layout 'tasks' var helpers
array('Html,'Javascript',
Ajax')

• Set name of controller as Tasks.
• Set layout to the name of the layout file.
• Set helpers to make additional libraries
  available.

8
Adding a New Task
Add new task
Set Response in
Request /tasks/add/ with form parameters
1
6
Tasks Controller
Views todo.thtml
tasks_controller.php
tasks_todo division rendered
5
Add Method
Add Method Called
2
3
4
task added with done0
All tasks returned
Tasks Model task.php
Table tasks
9
Action Function add() app/controllers/tasks_contro
ller.php
function add() // add a new task record to
database if (!empty(this-params'data'))
if (this-Task-save(this-params'data'))
this-set('data', this-Task-findAll())
this-render('todo', 'ajax')

• Add the new record with the form parameters.
• Retrieve all the task records and set them in
  variable data, which is passed to the view.
• Render AJAX view todo.thtml.

10
app/views/tasks/todo.thtml
row'Task' if (item'done' 0)
print " type'checkbox' onClick'new
Ajax.Updater(\"tasks_done\",
\"/minourax/cake_ajax_tasks/tasks/done/itemid\

• Tasks with done 0 is displayed in the
  tasks_todo division of index.thtml
• The newly added task is displayed with a checkbox

11
Changing the status of a task
Checkbox clicked for task id 10
Set Response in
Request /tasks/done/10
1
6
Tasks Controller
Views done.thtml
tasks_controller.php
tasks_done division rendered
5
Done Method
Done Method Called
2
3
All tasks returned
task id 10 updated with done1
4
Tasks Model task.php
Table tasks
12
Function for Action done() app/controllers/tasks_c
ontroller.php
function done(id null) // move task from
todo to done this-Task-id id
this-params'data''Task''done' 1 if
(this-Task-save(this-params'data'))
this-set('data', this-Task-findAll())
this-render('done', 'ajax')

• Set id as the current task ID in the model.
• Change the value of form parameter done received
  to 1.
• Update the current record with the form
  parameters.
• Retrieve all the task records and set them in
  variable data, which is passed to a view.
• Render AJAX view done.thtml.

13
app/views/tasks/done.thtml
row'Task' if (item'done' 1)
print " type'checkbox' onClick'new
Ajax.Updater(\"tasks_todo\",
\"/minourax/cake_ajax_tasks/tasks/undo/itemid\

• Tasks with done 1 is displayed in the
  tasks_done division of index.thtml
• If the checkbox is clicked, function undo() in
  the controller is called with itemid as
  parameter.
• Ajax Updater that updates the tasks_todo division
  with AJAX view rendered by the function undo() is
  set up.

14
Layout for tasks app/views/layouts/tasks.thtml
html-charsetTag('UTF-8)? javascript-link('prototype')? javascript-link('scriptaculous.js) ?
CakePHP Ajax/title
content_for_layout?

• Ajax files are placed in app/webroot/js and
  included in the layout file
• title_for_layout - replaced with in
  index.thtml
• content_for_layout- replaced with in
  index.thtml