Today I want to demonstrate how to make interactive forms with sfForm and Doctrine. The target is to create an interface which edits an object, edits related objects and allows you to add or remove related objects. See the screenshot below for the end-result:
Preparation
- To illustrate my way of installing I added a full history of what I did. The tutorial will start in the next paragraph. *
I started with a fresh 1.2beta project with something like
symfony generate:project sandbox. After the project setup I ran:
1) ./symfony generate:app frontend to create the frontend app
2) Enable Doctrine: config/ProjectConfiguration.class.php
<?php require_once dirname(__FILE__).'/../../lib/symfony/1.2/lib/autoload/sfCoreAutoload.class.php'; sfCoreAutoload::register(); class ProjectConfiguration extends sfProjectConfiguration { public function setup() { $this->enablePlugins(array('sfDoctrinePlugin')); $this->disablePlugins(array('sfPropelPlugin')); } }
3) I installed a SQLite db: config/databases.yml
all:
doctrine:
class: sfDoctrineDatabase
param:
dsn: sqlite:///<?php echo dirname(__FILE__); ?>/../log/sqlite.db4) I made the schema.yml
---
Author:
columns:
name: string(255)
description: string
Book:
columns:
author_id: integer(20)
title: string(255)
released: integer(20)
relations:
Author:
foreignAlias: Books5) I put some sample data in /data/fixtures/fixtures.yml. There’s a link to the file at the end of this post.
6) Run some fun stuff at the command line: ./symfony doctrine:build-all-load followed by ./symfony cc and to setup the right permissions sudo ./symfony project:permissions.
7) Now I create a default doctrine module to edit the Author table: ./symfony doctrine:generate-module frontend author Author. Everything should be up and running now, visiting http://your_host/frontend_dev.php/author should give you something like:
The Author form is still very basic:
Automatic templates
First step is to remove the strict formatting in the template and enable automattic formatting. As I’m lazy I want sfForm to do the layout work for me. Open up the /apps/frontend/modules/author/templates/_form.php partial and remove some code. The following template will display sfForm using it’s own __toString() rendering system:
<?php include_stylesheets_for_form($form) ?> <?php include_javascripts_for_form($form) ?> <form action="<?php echo url_for('author/'.($form->getObject()->isNew() ? 'create' : 'update').(!$form->getObject()->isNew() ? '?id='.$form->getObject()->getid() : '')) ?>" method="POST" <?php $form->isMultipart() and print 'enctype="multipart/form-data" ' ?>> <?php if (!$form->getObject()->isNew()): ?> <input type="hidden" name="sf_method" value="PUT" /> <?php endif; ?> <table> <tfoot> <tr> <td colspan="2"> <a href="<?php echo url_for('author/index') ?>">Cancel</a> <?php if (!$form->getObject()->isNew()): ?> <?php echo link_to('Delete', 'author/delete?id='.$form->getObject()->getid(), array('post' => true, 'confirm' => 'Are you sure?')) ?> <?php endif; ?> <input type="submit" value="Save" /> </td> </tr> </tfoot> <tbody> <?php echo $form ?> </tbody> </table> </form>
Don’t be impressed here; I only removed the code in the <tbody></tbody> section and removed the call to $form->renderHiddenFields(). Your form should still look exactly the same as in the screenshot supplied before.
Embed the forms
Now we can add the forms for all the books an Author has written to the form. Open /lib/form/doctrine/AuthorForm.class.php and add some intelligence:
class AuthorForm extends BaseAuthorForm { public function configure() { foreach ($this->object['Books'] as $index=>$book) { $this->embedForm('book'.$index, new BookForm($book)); } } }
This works, now you can edit all books:
Adding interactivity
The form works well and saves all values, but it is not possible to remove a book or add a new one yet. To achieve this we can add some more submit buttons, for each book one. This will inform the server what the user wants to delete or insert. I also restructured the code a bit to make it easier to understand.
public function configure() { foreach ($this->object['Books'] as $index=>$book) { $fieldName = 'book_'.$book['id']; $form = new BookForm($book); unset($form['author_id']); $this->embedForm($fieldName, $form); $label = '<input type="submit" name="submit" value="delete_'.$book['id'].'">'; if (count($this->object['Books']) -1 == $index) { // this is the last book $label.= '<input type="submit" name="submit" value="insert">'; } $label.= ' Book '.($index+1); $this->widgetSchema->setLabel($fieldName, $label); } }
I admit, it’s quite ugly on the screen. But in the action we will now have a parameter submit which is set to insert when the insert-button is clicked. It’s set to delete_* when one of the delete-buttons is clicked (* is the id of the related book), or it’s not set, then the normal ‘Save’ button is clicked.
Let’s work on /apps/frontend/modules/author/actions/actions.class.php to enable the form to react to these new parameters:
public function executeUpdate(sfWebRequest $request) { $this->forward404Unless($request->isMethod('post') || $request->isMethod('put')); $this->forward404Unless($author = Doctrine::getTable('Author')->find($request->getParameter('id')), sprintf('Object author does not exist (%s).', $request->getParameter('id'))); //get the submit value from the request, and split it into an array of command, id $submit = ($request->hasParameter('submit') ? $request->getParameter('submit') : '_'); $submit = explode('_',$submit); switch ($submit[0]) { case 'insert': $author['Books'][] = new Book(); break; case 'delete': $this->forward404Unless($book = Doctrine::getTable('Book')->find($submit[1])); $book->delete(); break; } $this->form = new AuthorForm($author); $this->processForm($request, $this->form); $this->setTemplate('edit'); }
This code works! After pressing one time on the insert button we can see that a new book is added to the form. Thanks to Doctrine the newly created book know’s it’s written by the Author. This is because the record defaults are automatically used as form defaults. According to the image below the only thing we need to do is some styling:
Styling the submit buttons
Luckily styling will be very easy. The old man at the wc3 will help a little, as they have once defined an <input type='image'>. This input looks like an image, but clicking it will submit the form. Let’s update the AuthorForm.class.php again:
public function configure() { foreach ($this->object['Books'] as $index=>$book) { $fieldName = 'book_'.$book['id']; $form = new BookForm($book); unset($form['author_id']); $this->embedForm($fieldName, $form); $label = '<input type="image" src="/images/delete.gif" name="submit" value="delete_'.$book['id'].'">'; if (count($this->object['Books']) -1 == $index) { // this is the last book $label.= '<input type="image" src="/images/add.gif" name="submit" value="insert">'; } else { $label.= '<img src="/images/empty.gif">'; } $label.= ' Book '.($index+1); $this->widgetSchema->setLabel($fieldName, $label); } }
Now our form looks and works the way we want:
Some more things to consider
Deleting a book will give you an Unexpected extra form field named "book2". error. This can be undone if you unset this data from the request. It needs some more work as the default generated processForm function has to be changed:
protected function processForm($data, sfForm $form) { $form->bind($data); if ($form->isValid()) { $author = $form->save(); $this->redirect('author/edit?id='.$author['id']); } } public function executeUpdate(sfWebRequest $request) { $this->forward404Unless($request->isMethod('post') || $request->isMethod('put')); $this->forward404Unless($author = Doctrine::getTable('Author')->find($request->getParameter('id')), sprintf('Object author does not exist (%s).', $request->getParameter('id'))); $data = $request->getParameter('author'); //get the submit value from the request, and split it into an array of command, id $submit = ($request->hasParameter('submit') ? $request->getParameter('submit') : '_'); $submit = explode('_',$submit); switch ($submit[0]) { case 'insert': $author['Books'][] = new Book(); break; case 'delete': $this->forward404Unless($book = Doctrine::getTable('Book')->find($submit[1])); unset($data['book'.$book['id']]); $book->delete(); break; } $this->form = new AuthorForm($author); $this->processForm($data, $this->form); $this->setTemplate('edit'); }
Also make sure to always check the $request->getParameter('submit') for validity. It’s not secured by the sfForm security system so you have to use it cautiously.
That’s it for today, thanks for reading!
Full source of this project (Make sure you change /config/ProjectConfiguration.class.php to point to the right location of the Symfony 1.2 Library)
