Delete image

Before proceeding with this topic and deleting images from your gallery, one thing must be acknowledged: images are both stored on the server and recorded in the database A database refers to data organized and stored on a computer that can be searched and retrieved by a computer program. Most industrial-strength and many smaller database applications can be addressed using SQL (Structured Query A query is a SQL command that will extract information from the tables of a database. Essentially, a query is a request for information from your database. Language).. They also need to be physically removed from the server. This can be done by using a Delete File server behavior A server behavior is a reusable component for server-side development. They add blocks of code to your pages for accomplishing specific tasks. Dreamweaver comes with several default server behaviors and the InterAKT extensions add many more to this list..

Rather than automatically deleting the image, you will set up a safety net where users must confirm the deletion. You will also display a preview of the image before deleting it.

Follow the next steps to build the page that deletes photos:

  1. Open the \admin\list_img file.

  2. Add an extra column to the dynamic table by selecting the whole table and incrementing the Cols field in the Properties panel.



    This column will contain a link to the page for deleting photos (delete_img).

  3. In the extra column, on the same row as the dynamic data write the word "Delete". Then, select the "Delete" text and right-click to reach the menu seen below. Select the Make Link option:

     

  4. An interface will appear to help you create the link. Since the delete page will need to know which image to delete, you should add an URL parameter with the image ID (stored in the id_img primary key A primary key is one or more table columns whose values uniquely identify each record in a table. In general, a primary key is defined on a single column, but it is not uncommon to have it defined on two columns. field). Click the Parameters button in the lower right side of the interface:


     

  5. When the Parameters window opens, type id_img in the Name field. For the Value field, click in the empty space and select the dynamic lightning bolt on the right:


     

  6. After clicking the lightning bolt, the Dynamic Data The InterAKT Dynamic Data tool is a replacement for the standard dynamic data dialog. It is used in the MX Kollection 3, to provide a unified way of building mark-ups, or place holders. These are recordset fields, server or session variables, and other types of dynamic data that are replaced at runtime by their corresponding values window appears. Here, just double-click on id_img and the Value field (from the previous window) will be populated.


     

  7. With the Dynamic Data window now closed, click OK in the Parameters window, and you'll be back in the Make Link Interface. All that's left is choosing the page to link to. Select the delete_img page from the admin folder.


     

The next set of steps take place in the delete_img page from the admin folder. The goal here is to create a confirmation page to prevent accidental deletions.

  1. Open the \admin\delete_img page. Type the message "Are you sure you want to delete this image?".

  2. You need to display the details of the image: a thumbnail preview, the filename, and the description from the database. In order to do so, create a recordset A recordset is the result of executing an SQL query. It is composed of multiple rows, each row having multiple columns. The columns presented in the query result depend on the column list declared in the query (they can belong to different tables). The number of rows and their order depend on the query conditions (WHERE, GROUP BY, HAVING, ORDER). The recordset acts as a source of dynamic data in web applications. from the image_img database table, filtered by the id_img URL parameter.

  3. As you remember from the previous topic, a recordset can be created from the Bindings tab in the Application panel. Configure the recordset as shown below. The Filter field selects only the image to be deleted by comparing its ID value with the one received through the URL parameter from the list_img page.

  4. Drag the filename_img and the description_img columns from the Bindings tab in your page, below the confirmation question:

  5. Add a thumbnail preview of the image, below the filename dynamic text, so the user can see the image being deleted. Hit Enter after {rsDeleteImage.filename_img}, then go to Server Behaviors -> MX Kollection -> File Upload -> Show Thumbnail. Configure the server behavior just as you have done in List images and show thumbnails, except use larger dimensions for the thumbnail (100x100 pixels). Here is how the page should look in the browser, if you pass it a valid URL parameter (such as page.php?id_img=2):


               

  6. Below the confirmation dialog, add a form by selecting Insert panel -> Forms -> Form (as shown below):


     

  7. Next, add a button to the form, also from the Forms tab:

  8. Select the button on the page, and go to the Property Inspector. Change the Button name to confirm and its Label to Yes.


     

  9. Repeat step 7 and create another button called cancel, and labeled No in the same form.

  10. Now you should make the No button link back to the image list page (list_img). First select the No button. Depending on your Dreamweaver version, the Go To URL feature will be in one of two places:
    ·  For Dreamweaver MX 2004 users - open the Tag Inspector panel, the Behaviors tab, and select Go To URL.



    ·  For Dreamweaver MX 6.1 users - open the Design panel, the Behaviors tab, and select Go To URL.



    ·  In the interface that appears, select list_img as seen here:


        

  11. Now you can use the Delete Record Transaction A transaction is a group of SQL statements whose effects are logically connected. Anything from simple queries to inserting, and deleting operations can be considered a transaction, as well as more complex groups of several statements which accomplish a specific task. feature of MX Kollection 3. Go to the Insert bar -> MX Kollection tab, and click the Delete Record Transaction icon (shown below).


     

  12. Configure the Delete Record Transaction window. Notice that most of the fields are already correctly filled in: Connection, Delete from table, Primary key column and Primary key equals.

  13. If left like this, the delete operation would occur immediately when the page loads, making the safety net completely useless. There is however one dialog box option to define a start condition: the First check variable field. To start the delete action only after pressing the Yes button, select in the First check variable drop-down menu the Form variable option. Type in the associated dialog box the name of the Yes button: confirm.


                   

  14. Since all other fields are already set up, click the OK button to add the server behavior to the page.

  15. The Delete Record Transaction removed the image from the database. However, you also need to remove the actual file from the server. In order to do that, you need to apply the Delete File server behavior to your page (Server Behaviors panel -> MX Kollection -> File Upload -> Delete File).

  16. Configure the Delete File server behavior as follows:



    Notice that the field storing the image name (filename_img) and the folder are already selected in the Table column drop-down menu and File folder text field.

  17. Click OK when done.

 

You can now test the delete_img page in your browser. The page should look something like this:


 

Note: If you delete an image from your gallery, the delete_img page will remove the corresponding record from the database, and will remove the actual file and all generated thumbnails from the server.

You have now completed the administrative section of your image gallery. You can upload, view and delete images. In the next topic, you will start learning how to display images in the site front-end.

Login to Add New Note