Add image capabilities to the list and form

In this topic you will modify the product list and form in order to enable the use of images:

• The list will display a thumbnail instead of the file name, when a file exists.

• The form will allow uploading and removing images, to comply with the cases presented at the beginning.

Display image thumbnail in the list

At this point the list displays the product name, description, price and the name of the image file, in plain text. Using the Show thumbnail server behavior you will replace the plain text file name with the actual image. And to avoid an undesired page aspect you will use the Show If File Exists to prevent seeing an Image not found picture.

To display the product thumbnail in the list, follow the instructions below:

1. Open the site index in Dreamweaver.

2. Remove the dynamic text displaying the file name. Select it in the page and press the Delete key:
   
   
                         

3. Next go to the Server Behaviors tab, click the Plus (+) button and select MX Kollection > File Upload > Show Thumbnail.

4. The Show thumbnail server behavior only has one set of options you must configure:
   
   
                        

• In the File folder text field you must enter the relative path to the folder to store the images. Click the Browse button and select the img folder in the site root.

• In the Recordset drop-down menu select the list recordset: rsproduct_prd1.

• In the Field drop-down menu select the table column to store the image file name in. Select image_prd.

• In the Resize method drop-down menu select how to resize the thumbnail. Select Proportional - Fit to box.

• In the Width and Height text fields enter the desired thumbnail dimensions. Enter 40 and 40 in both.

5. When you are done setting the options, click OK to close the user interface and apply the changes. An image will be displayed where the thumbnails will appear:
   
   
    

6. Save, upload, and preview the page in a browser. For a database with  items with images and items without, the list will look like below:
   
   

In order to display the image only when it really exists, and thus get rid of the Image not found picture, you have to use a conditional region:

1. Open the site index in Dreamweaver, if necessary.

2. Click on the dynamic thumbnail image to select it (the one added when applying the server behavior above).

3. Go to the Server Behaviors tab > Plus (+) > MX Kollection > Conditional Regions and select the Show If File Exists server behavior.

4. Configure the user interface:
   
   
             

• In the File folder text field select the folder where images are stored.

• In the Recordset drop-down menu select the list recordset: rsproduct_prd1.

• In the Field drop-down menu select the recordset field storing the image filename: image_prd.

5. When you have finished setting the options, click the OK button to close the user interface and apply the changes. A translator will be displayed in Dreamweaver around the thumbnail.

6. Save, upload, and preview the page in a browser. This time nothing will be displayed for the record that has no image attached.
   
   

Add image upload to the form

In order to upload images when adding products you must modify the page containing the NeXTensio form:

1. Open the form page in Dreamweaver.

2. Go to the Server Behaviors tab > Plus (+) > MX Kollection > File Upload and apply the Upload and Resize Image server behavior. The user interface is divided into three sets of options which must be configured:

3. In the Basic tab of the user interface configure where to store files and filenames:
   
   
                         

• In the Form field drop-down menu select the form element set as file field.

• In the Table column drop-down menu select the table column where to store the filename: image_prd.

• In the Upload folder text field enter the relative path to the folder where images will be saved. Click Browse and select the img folder in the site root.

4. In the File tab set options related to the file size, accepted extensions. You can leave these options at their default values, as shown in the image below:
   
   
    

5. Click OK to apply the server behavior when you are done setting the options. Then save the changes.

6. If you try to add or update a product from the list, and specify a file to upload for the image, it will be copied to the server and displayed in the list.

Remove files when records are deleted

At this point you can add files when records are added to the database. Next you have to implement a mechanism that will remove an image from the server when the record that uses it is deleted from the database. For this you will use the Delete file server behavior:

1. Open the form page in Dreamweaver if necessary.

2. Go to the Server Behaviors tab > Plus (+) > MX Kollection > File Upload and select the Delete File server behavior.

3. Configure the Basic tab of the user interface:
   
   
                          

• In the Table column drop-down menu select the table column that stores the filename.

• In the File folder text field enter the relative path to the folder that stores the images.

4. After you have finished setting up the options, click the OK button to apply the changes. A server behavior will be added to the list in the server behaviors tab.

Now, four of the five goals proposed at the beginning of this tutorial have been accomplished. You can upload images on insert and update, remove images when the record is deleted and replace an existing photo with a new one.

Next you have to add a checkbox that will allow the user to completely remove an image on update:

1. Open the form page in Dreamweaver, if necessary.

2. Create a new row after the price. Place the mouse cursor after the price text field and press the TAB key.

3. In the first cell of the new row enter the element label: Delete image.

4. Place the mouse cursor in the second cell and from the Forms tab of the Insert bar add a checkbox.
   
   
    

5. Using the Property Inspector options, change the name and the value of the control. For the name use delete_image, and for the checked value, set it to 1:
   
   
    

6. To make it easier for the user to decide whether to remove the image or not, display its thumbnail next to the checkbox in the form. Place the mouse after the checkbox and apply the Show Thumbnails server behavior from the Server Behaviors tab > Plus (+) > MX Kollection > File Upload. Configure it in the same manner as explained above. (remember to select the correct recordset - rsproduct_prd).

7. Next you have to set the entire row to be displayed only when two conditions are met: when the operation is update and when a file exists (you can't delete what does not exist).

8. Place the mouse cursor next to the checkbox and from the tag inspector select the <tr> tag:
   
   
    

9. Apply the Show If File Exists server behavior from the Server Behaviors tab > Plus (+) > MX Kollection > Conditional Regions. Configure the user interface in the same manner as for the list thumbnail (using the form recordset). Click OK to apply the server behavior. A translator will be displayed around the entire row.

10. Next you must set the entire row to be displayed only on update. The page performs an update operation if the record ID is passed as an URL parameter. The URL parameter has the same name as the table primary key.

11. To make the URL parameter accessible, go to the Bindings tab, click the Plus (+) button and select the URL variable menu option.
    
    
    
    Note: if using the ASP VBScript server model, the option is named Request variable.
                            
12. In the dialog box that opens enter the URL parameter name in the Name text field: id_prd:
    
    
                                  

13. Click OK to close the dialog box and create the binding.

14. Click next to the checkbox added earlier, and from the list displayed in the Server Behaviors tab select the Show If File Exists server behavior (single-click).
    
    
     

15. Apply the Show If Conditional Region to display the area only when the URL parameter exists from the Server Behaviors tab > Plus (+) > MX Kollection > Conditional Regions.

16. The user interface is divided into two tabs: Basic, to create simple conditions, and Advanced for more complex evaluations. Because the condition is simple, you will use the Basic interface:
    
    
                     

• In the Expression 1 field you must enter the value of the id_prd URL parameter. Click the dynamic data icon (the yellow lightning bolt) and select the id_prd URL parameter.
  
  
   

• Click OK to add the URL parameter value.

• In the Condition drop-down menu select the different operator (!=).

• The Expression 2 field will remain empty. This means that the server behavior will check if the value of the URL parameter is different than NULL (this means it exists).

17. Click the OK button to close the user interface and apply the server behavior.

Now the option to delete the image on product update has been added to the form, but you still have to add the logic that will remove the file from the server and the filename from the database.

To remove the file from the server disk you will use the Delete file server behavior, set to execute after the update operation, and only if the checkbox has been checked:

1. With the form page opened in Dreamweaver, apply the Delete File server behavior from the Server Behaviors tab > Plus (+) > MX Kollection > File Upload.

2. Configure the Basic tab of the user interface the same as above:

• In the Table column drop-down menu select image_prd.

• In the File folder text field select the img folder in the site root.

3. Next switch to the Advanced tab to set the properties:

• From the Transactions grid remove the existing del_product_prd transaction. Select it and press the Minus (-) button:
  
  
   

• Now click the Plus (+) button to add a transaction. From the list that is displayed select the update transaction (upd_product_prd). Then click OK:
  
  
   

• Click the Build Condition button to define a starting condition for the delete operation. You will use the Basic tab to define the condition.

• For the Expression 1 text field click the InterAKT Dynamic Data icon (the blue lightning bolt) to select the value of the form checkbox. Configure the dynamic data interface as shown below.

• In the Get values from drop-down menu select Form Variable.

• In the Variable text field enter the name of the checkbox: delete_image, as set above.

• Click OK to add the dynamic value to the condition:
  
  
   

• In the Condition drop-down select the equality operator (==).

• In the Expression 2 enter the value of the checkbox as set above. Enter 1.
  
  
   

• Click OK to finish defining the condition.

4. The configured user interface should look as follows:
   
   
    

5. Click OK to apply the server behavior.

Now the file on the server is removed if the checkbox is selected, but not the name from the database. To implement this, you have to add a custom trigger that will perform an update operation on the field:

1. Go to the Server Behaviors tab > Plus (+) > MX Kollection > Forms and select the Custom trigger server behavior.

2. In the Basic tab you have to add the code that will perform the update operation. Copy and paste the code section below that matches your particular server model:

• For PHP_MySQL and PHP_Adodb:
  
  $query = "UPDATE product_prd SET image_prd = '' WHERE id_prd = ".$tNG->getPrimaryKeyValue();
  $tNG->connection->execute($query);
  return NULL;
   

• For ASPVBScript:
  
  query = "UPDATE product_prd SET image_prd = '' WHERE id_prd = " & tNG.getPrimaryKeyValue()
  tNG.connection.execute(query)
   

• For ColdFusion you have to take two steps: one is adding some code in the custom trigger, and the other is to add some code after the custom trigger has been defined - see step 6 below. For now enter content in the Custom trigger text area:
  
  query = "UPDATE product_prd SET image_prd = '' WHERE id_prd = " & tNG.getPrimaryKeyValue();
  Request.updateprod(query,tNG.connection);
  return Request.KT_Null;
   

3. The configured user interface should look like the following:
   
   
    

4. Next you must set the trigger properties. It has to execute only for the update transaction and on the same condition as the file removal:

• In the Advanced tab remove the ins_product_prd and del_product_prd transactions from the list. Select each of them and press the Minus (-) button. The only item in the list is upd_product_prd.

• Next click the Build Condition button and define the starting condition. Configure it in the same way as for the Delete File server behavior above.

• The configured user interface should look like:
  
  
   

5. Click OK to apply the server behavior.

6. For ColdFusion, you need to perform some additional steps after applying the Custom Trigger:

• Switch to code view in Dreamweaver.

• In the Server Behaviors tab of the Application panel, click the Custom Trigger you've just created. This will select the code corresponding to the trigger in Dreamweaver code view.

• Before the opening <cfscript> tag that belongs to the trigger, you must add the following code:
  
  <cffunction name="updateprod">
  <cfargument name="sql" type="string" required="true">
  <cfargument name="connection" type="string" required="true">
  <cfquery datasource="#connection#">
  #PreserveSingleQuotes(sql)#
  </cfquery>
  </cffunction>
  <cfset request.updateprod = updateprod>
   

• This code declares the updateprod function used in the custom trigger to execute the update query.

7. Save the page and upload it to the server.

If you try to edit a product that has an associated image, the Delete image checkbox will be displayed.

To check if the modifications added really work, check the Delete image option, and then click Update.


 

The list will load again, but it will not display any image for the record anymore: