Home

Simple Example

Lets create a simple example to show how rapidly a multi-page form can be created with the WizardComponent.

For this example, I am going to be creating a 4 step signup wizard that includes the following steps:

1. Account Info
2. Mailing Address
3. Billing Info
4. Review

There will also be a “confirmation” page at the end to confirm the user’s signup. This is a very simple example and a wizard like it probably doesn’t have a whole lot of real world usefulness, but I just want to demonstrate how the component is used and highlight a couple things as we go along.

It is important to note that though we will using multiple models, the entire wizard will be contained in one controller. Also, I will be using the words ‘step’ and ‘page’ interchangeably – I’m merely referring to a page in the multi-page wizard.

So after downloading wizard.php into our project’s component folder, we include it in our controller’s $components array just as we would any other component:

Controller Class:

<?php
class SignupController extends AppController {
	var $components = array('Wizard.Wizard');
}
?>

Next, we’re going to setup our $steps array, which is an ordered list of steps for the wizard to follow. Each step will have its own view and will be processed by its own controller callback method. There is also another optional callback for each step that will be discussed later.

The steps array is setup in your controller’s beforeFilter():

function beforeFilter() {
	$this->Wizard->steps = array('account', 'address', 'billing', 'review');
}

The next step is to create the views used in the signup wizard. The names of the views correspond to steps names included in $steps (account.ctp, address.ctp, etc). I’ll include the first view (account.ctp) just to highlight a couple things.

View Template:

<?php echo $this->Form->create('Signup', array('id' => 'SignupForm', 'url' => $this->here)); ?>
	<h2>Step 1: Account Information</h2>
	<?php 
		echo $this->Form->input('Client.first_name', array('label' => 'First Name:'));
		echo $this->Form->input('Client.last_name', array('label' => 'Last Name:'));
		echo $this->Form->input('Client.phone', array('label' => 'Phone Number:'));
		echo $this->Form->input('User.email', array('label'=>'Email:'));
		echo $this->Form->input('User.password',array('label'=>'Password:'));
		echo $this->Form->input('User.confirm', array('label'=>'Confirm:', 'type'=>'password'));
	?>
	<div class="submit">
		<?php echo $this->Form->submit('Continue', array('div' => false)); ?>
		<?php echo $this->Form->submit('Cancel', array('name' => 'Cancel', 'div' => false)); ?>
	</div>
<?php echo $this->Form->end(); ?>

The first thing I want to point out is the url that the form is submitted to. Rather than submitting to the next step in the wizard, each step submits to itself, just as a normal form would do. (My favorite method is above : 'url' => $this->here). This is important because one of my main goals in creating this component was to allow the wizard to be easily setup and easily modified. This meant keeping the views divorced, as much as possible, from their inclusion or position in the steps array.

The second thing I wanted to highlight was the component’s ability to handle data for multiple models (the same as single page forms). This is possible because every step has its own custom callback to process its data.

Step 2: View Preparation and Data Processing