Create a Quick Application in CakePHP: Part 2

Editing a Task

Now that we can add tasks to CakeTooDoo, the next thing that we will be doing is to have the ability to edit tasks. This is necessary because the users should be able to tick on a task when it has been completed. Also, if the users are not happy with the title of the task, they can change it. To have these features in CakeTooDoo, we will need to add another action to our Tasks Controller and also add a view for this action.

Time for Action: Creating the Edit Task Form

1. Open the file tasks_controller.php and add a new action named edit as shown in the following code:

   function edit($id = null) 
   {
   	if (!$id) {
   		$this->Session->setFlash('Invalid Task');
   		$this->redirect(array('action'=>'index'), null, true);
   	               }
   	if (empty($this->data)) {
   		$this->data = $this->Task->find(array('id' => $id));
   	} else {
   	if ($this->Task->save($this->data)) {
   		$this->Session->setFlash('The Task has been saved');
   		$this->redirect(array('action'=>'index'), null, true);
   	} else {
   		$this->Session->setFlash('The Task could not be saved.
   					        Please, try again.');	 
   	           } 
   	} 
   }
   

2. Inside the directory /CakeTooDoo/app/views/tasks, create a new file named edit.ctp and add the following code to it:

   <?php echo $form->create('Task');?> 
   	<fieldset> 
   	               <legend>Edit Task</legend>
   	               <?php
   		             echo $form->hidden('id');
    		             echo $form->input('title');
   		             echo $form->input('done');
   	                ?>
   	 </fieldset>
   <?php echo $form->end('Save');?>

3. We will be accessing the Task Edit Form from the List All Task page. So, let’s add a link from the List All Tasks page to the Edit Task page. Open the index.ctp file in /CakeTooDoo/app/views directory, and replace the HTML comment <!– different actions on tasks will be added here later –> with the following code:

   <?php echo $html->link('Edit', array('action'=>'edit',
   $task['Task']['id'])); ?>

4. Now open the List All Tasks page in the browser by pointing it to http://localhost/CakeTooDoo/tasks/index and we will see an edit link beside all the tasks. Click on the edit link of the task you want to edit, and this will take you to do the Edit Task form, as shown below:

   

5. Now let us add links in the Edit Task Form page to the List All Tasks and Add New Task page. Add the following code to the end of edit.ctp in /CakeTooDoo/app/views:

   <?php echo $html->link('List All Tasks', array('action'=>'index')); ?><br />
   <?php echo $html->link('Add Task', array('action'=>'add')); ?>

What Just Happened?

We added a new action named edit in the Tasks controller. Then we went on to add the view file edit.ctp for this action. Lastly, we linked the other pages to the Edit Task page using the HTML helper.

When accessing this page, we need to tell the action which task we are interested to edit. This is done by passing the task id in the URL. So, if we want to edit the task with the id of 2, we need to point our browser to http://localhost/CakeTooDoo/tasks/edit/2. When such a request is made, Cake forwards this request to the Tasks controller’s edit action, and passes the value of the id to the first parameter of the edit action. If we check the edit action, we will notice that it accepts a parameter named $id. The task id passed in the URL is stored in this parameter.

When a request is made to the edit action, the first thing that it does is to check if any id has been supplied or not. To let users edit a task, it needs to know which task the user wants to edit. It cannot continue if there is no id supplied. So, if $id is undefined, it stores an error message to the session and redirects to the index action that will show the list of current tasks along with the error message.

If $id is defined, the edit action then checks whether there is any data stored in $this->data. If no data is stored in $this->data, it means that the user has not yet edited. And so, the desired task is fetched from the Task model, and stored in $this->data in the line: $this->data = $this->Task->find(array(‘id’ => $id)); Once that is done, the view of the edit action is then rendered, displaying the task information. The view fetches the task information to be displayed from $this->data.

The view of the edit action is very similar to that of the add action with a single difference. It has an extra line with echo $form->hidden(‘id’);. This creates an HTML hidden input with the value of the task id that is being edited.

Once the user edits the task and clicks on the Save button, the edited data is resent to the edit action and saved in $this->data. Having data in $this->data confirms that the user has edited and submitted the changed data. Thus, if $this->data is not empty, the edit action then tries to save the data by calling the Task Model’s save() function: $this->Task->save($this->data). This is the same function that we used to add a new task in the add action.

You may ask how does the save() function of model knows when to add a new record and when to edit an existing one? If the form data has a hidden id field, the function knows that it needs to edit an existing record with that id. If no id field is found, the function adds a new record.

Once the data has been successfully updated, a success message is stored in the session and it redirects to the index action. Of course the index page will show the success message.

Adding Data Validation

If you have come this far, by now you should have a working CakeTooDoo. It has the ability to add a task, list all the tasks with their statuses, and edit a task to change its status and title. But, we are still not happy with it. We want the CakeTooDoo to be a quality application, and making a quality application with CakePHP is as easy as eating a cake.

A very important aspect of any web application (or software in general), is to make sure that the users do not enter inputs that are invalid. For example, suppose a user mistakenly adds a task with an empty title, this is not desirable because without a title we cannot identify a task. We would want our application to check whether the user enters title. If they do not enter a title, CakeTooDoo should not allow the user to add or edit a task, and should show the user a message stating the problem. Adding these checks is what we call Data Validation. No matter how big or small our applications are, it is very important that we have proper data validation in place. But adding data validation can be a painful and time consuming task. This is especially true, if we have a complex application with lots of forms.

Thankfully, CakePHP comes with a built-in data validation feature that can really make our lives much easier.

Time for Action: Adding Data Validation to Check for Empty Title

1. In the Task model that we created in /CakeTooDoo/app/models, add the following code inside the Task Model class. The Task Model will look like this:

   <?php
   class Task extends AppModel { 
   	var $name = 'Task';
   	var $validate = array( 
   	'title' => array( 'rule' => VALID_NOT_EMPTY,
   	'message' => 'Title of a task cannot be empty' )
   	 ); 	
   	} 
   ?>
   

2. Now open the Add Task form in the browser by pointing it to http://localhost/CakeTooDoo/tasks/add, and try to add a task with an empty title. It will show the following error message: