Create the basic product list and form

In this section of the tutorial you will create the basic product list and form using NeXTensio.

First, create the product list:

1. Open the index page in Dreamweaver.

2. Go to the MX Kollection tab of the Insert bar and click on the Create NeXTensio List Wizard icon. The wizard is divided into four steps which must be configured.

3. In the first step configure table details:
   
   
                              

• In the Get data from drop-down menu select the data source for the list: Table.

• In the Connection drop-down menu select the database connection created in the previous topic: connImages.

• In the Table drop-down menu select the table storing product information: product_prd.

• In the Detail page text field enter the file where the NeXTensio form will be created. Leave the default value: form. The file will be physically created in your site root.

4. In the second step of the wizard define the columns to be displayed in the list. Use the default values, as all fields will be displayed from the current table. Configure the options as you can see in the image below (the fields order):
   
   
    

5. In the third step define what form element will each column use for the list filter. Remove the filter element for the product image:
   
   
                              

• From the List columns select the image_prd field.

• In the Display as drop-down menu select None.

• Click Next to move on to the last step of the wizard.

6. In the last step define general list options:
   
   
                   

• In the Default order drop-down menu select the table column to sort the list by. Select name_prd.

• For the order method select Ascending. This way products will be displayed alphabetically.

• In the Duplicate buttons and Duplicate navigation drop-down menus select No.

• Leave all other options to Yes.

7. When you have finished configuring all steps of the wizard, click Finish to close it and apply the changes to the page.

The wizard will add HTML elements and server behaviors to the page in order to build the list. Save the page and upload it to the remote server.

Next you will build the NeXTensio form that implements the operations in the list:

1. Open the form page from the site root in Dreamweaver.

2. Go to the MX Kollection tab of the Insert bar and click the Create NeXTensio Form Wizard icon. The wizard is divided into four steps which must be configured. Because MX Kollection uses the user interface persistence, part of the field options are already set up.

3. The first step of the wizard is completely configured with the database connection and product table:
   
   
                               

4. In the second step configure what form elements will each field use:
   
   
                                

• For the description_prd field select in the Display as drop-down menu Text area.

• For the image_prd field select in the Display as drop-down menu File field.

5. In the third step you can define validation rules for each field used in the form:
   
   
                             

• Select the name_prd field in the grid, and then check the Required option.

• Do the same for the price_prd field (you cannot have a product without a name and a price).

6. In the last step of the wizard define form specific options:
   
   
                          

• In the Duplicate buttons drop-down menu select No.

• Leave all other options to Yes.

7. When you are done configuring the form options click the Finish button to close the wizard and apply the changes. Save the page.

If you want, you can even test the list and form in a browser, but the image upload will not work. You will be able to add or edit products, but without any file operations.

In the next topic you will enhance both the list and the form to enable the use of product pictures.