Create the employee editing form

In this section of the tutorial you will build the NeXTensio form which allows manipulating employee data: adding, editing and deleting.

The page will be created in two major steps:

1. Add the NeXTensio form. The NeXTensio form will be based on the database table explained at the beginning of this tutorial, containing the name and salary fields.

2. After you add the NeXTensio form, you will have to manually add a field that will allow uploading the photo. Uploaded file names will not be stored in the database. Instead, files will be renamed using a rule.

Add the NeXTensio form

The first step is to add the NeXTensio form to the page. To do so, follow the next steps:

1. Open the form page in Dreamweaver.

2. Apply the Create NeXTensio Form Wizard from the MX Kollection tab of the Insert panel. Configure each step of the wizard as follows (most options should be already set if you haven't disabled the user interface persistence):

3. • In the first step, select the database connection and table to use.

   • In the second step, the table columns that will be displayed as form elements are shown in a grid. Both the name and salary need to appear in the form as text fields, so there is nothing to change. Simply click on Finish to add the form to the page.
     
     
      

Add photo uploading capability

To allow the upload of a photo for each employee, you need to add to the NeXTensio form a new form field. You also have to add the logic that uploads the image files to the server. To do so, follow the next steps:

1. Place the mouse cursor in the Salary table cell. Right click in the cell, and from the pop-up menu select Table > Insert Rows or Columns. Add one row, below the current selection.

2. The new row will have two columns: In the first one, enter the label (Photo), and in the second, add a form file field (from the Forms tab of the Insert panel).
   
   
    

3. Now, the form should look like:
   
   
    

4. The NeXTensio form allows adding or updating multiple records at once, in a single operation. This means that you can add more than one employee to the database, and this is possible because the name and salary fields contain, for both the name and ID, a static name and a dynamic value.
   For example, the name field has the following name attribute:

5. • For PHP: name="name_emp_<?php echo $cnt1; ?>"

   • For ASP: name="name_emp_<%= cnt1 %>

   • For ColdFusion: name="name_emp_<cfoutput>#cnt1#</cfoutput>

5. The cnt1 variable increments for each new record that is added, allowing each field to have a unique name. This way, information is added correctly into the database. You will have to add the same code bit for both the file field name and ID. The file field element code will have to look like this:

6. • For PHP: <input type="file" name="file_<?php echo $cnt1; ?>" id="file_<?php echo $cnt1; ?>">

   • For ASP: <input type="file" name="file_<%= cnt1 %>" id="file_<%= cnt1 %>">

   • For ColdFusion: <input type="file" name="file_<cfoutput>#cnt1#</cfoutput>" id="file_<cfoutput>#cnt1#</cfoutput>">
     
     Note: If you do not change the file field to use the cnt1 variable, multiple insert and update will not work correctly.
      

6. The HTML elements are now in place. This means you have to start adding application logic. This is composed by two actions:

7. • Uploading images - when an employee is added or updated. This is done with the Upload and Resize Image server behavior.

   • Deleting the files - when an employee is deleted. This will be implemented with the Delete File server behavior.

7. First add the image upload logic. Apply the Upload and Resize Image server behavior from the Server Behaviors tab > + > MX Kollection > File Upload, and configure it as follows:

8. • In the Form field drop-down menu, you have to select the form file field element added at step 2. Only file field type elements are displayed in this drop-down, so if you have not added any other controls of this type, there should be only one entry.

   • In the Table column drop-down you should select the column where to save the file names. Since the file names will not be saved in the database (there is no field for this), select the None: Rename rule option in the drop-down.

   • For the Upload folder select the photos folder from the site root.

   • The rename rule is defined in the File tab of the user interface. The rule is the same used in the list creation (employee_name.jpg), with the employee name as dynamic value. To add this dynamic value, click on the blue lightning bolt next to the Renaming rule text field to open the InterAKT Dynamic Data dialog box.

   • In the InterAKT Dynamic Data dialog box, select the data source (Transaction field - the field to use is part of the current transaction -), and the field name (name_emp). When you click on OK, the generated mark-up will be added to the text field.
     
     
      

   • Next you need to add the static portion of the rename rule (the .jpg part). Place the mouse cursor after the mark-up, and type the extension. With this, the Upload and Resize Image is configured, and you can click on OK to add it to the page.
     
     
      

8. Next you need to add the component which will remove a photo from disk when an employee is removed from the database. This will be implemented with the Delete File server behavior. You can access this server behavior from the Server Behaviors tab > + >MX Kollection > File Upload. Configure the user interface that opens as follows:

9. • In the Table column drop-down menu select the None: Rename rule option. The file configuration must match the one used for upload, so that the correct files will be deleted.

   • In the Renaming rule, you will use the same combination of dynamic and static as for upload (shown above). Follow the same steps to add the renaming rule.

   • In the File folder text field, enter the photos folder in the site root.
     
     
      

The form page is now complete, and you can save it. After uploading it to the server, you can test it in the browser, by clicking on the Add new link/button in the list. Fill in the required information, and select a file from the local disk to upload. It will be renamed according to the defined rule.