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 VARCHAR255
NOT NULL done TINYINT1 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
arrayHtmlJavascript
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 emptythis-paramsdata
if this-Task-savethis-paramsdata
this-setdata this-Task-findAll
this-rendertodo 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.Updatertasks_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 doneid null // move task from
todo to done this-Task-id id
this-paramsdataTaskdone 1 if
this-Task-savethis-paramsdata
this-setdata this-Task-findAll
this-renderdone 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.Updatertasks_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-charsetTagUTF-8? javascript-linkprototype? javascript-linkscriptaculous.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