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
idadd_task div
6




7
Controller app/controllers/tasks_controller.php
AppController var name Tasks var
layout tasks var helpers
array(HtmlJavascript
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-paramsdata))
if (this-Task-save(this-paramsdata))
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
rowTask if (itemdone 0)
print typecheckbox onClicknew
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-paramsdataTaskdone 1 if
(this-Task-save(this-paramsdata))
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
rowTask if (itemdone 1)
print typecheckbox onClicknew
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