REST tutorial

This is probably the simplest operation to implement, as it involves no parsing of data. We simply make an HTTP DELETE request against a particular URI.

As before, we start with the server side. In the AuctionServer.java class, edit the service method, and add another section to the if statement at the end:

	if(verb.equals("GET")) {
		handleGetItem(item_id, response);
	} else if(verb.equals("POST") && item_id >= 0) {
		ServletInputStream input = request.getInputStream();
		handlePostItem(input, response);
	} else if(verb.equals("DELETE") && item_id >= 0) {
		handleDeleteItem(item_id, response);
	}

As with the POST verb, we only want to delete an object if it was requested, hence the item_id >= 0 clause in the if statement. The handleDeleteItem method needs to do nothing more than execute an SQL DELETE command, and handle SQL errors:

public void handleDeleteItem(int item_id, HttpServletResponse response)
	throws IOException, ServletException
{
	// The DELETE handler simply deletes things from the database
	try {
		// Delete the item from the database
		String sql = "DELETE FROM item WHERE id = ?";
		PreparedStatement stmt = db_connection.prepareStatement(sql);
		stmt.setInt(1, item_id);
		stmt.execute();

		// Ensure that the update gets sent to the disk
		flush_db.execute();

	} catch(SQLException ex) {
		ex.printStackTrace(System.err);
		sendInternalError(response, "SQL Exception");
		return;
	}
}

Note that we don’t explicitly check that item_id exists in the database. This is to ensure the idempotency requirements of the HTTP DELETE verb. The database will not complain if the SQL DELETE command deletes no items; thus if we delete an item which does not exist in the database, no error will be thrown.

Recompile your servlet, and reload it in Tomcat using the Tomcat manager.

We now need to make the client able to delete an item from the database. The first thing is to put in suitable user interface elements. We could just repeat the job we did with the POST verb, and have a field and a button: type the ID of the item you want to delete into the field, and press the button. However, we can be more user friendly than that. How about a “delete” button next to each item in the items list?

You may have noticed when we implemented our GET operation in the client, that there was an unused column in the table it generated. We will use this spare column to put in a delete button for each item in our database.

In the view_all_items function in the client, find the loop where the list of items is created, and change it to read:

	for(var idx in items)
	{
	    var item = items[idx];

	    if(item['id'])
	    {
	        newlist += "  <tr>\n";
		newlist += "    <td>" + item['title'] + "</td>\n";
		newlist += "    <td>" + item['description'] + "</td>\n";
		newlist += "    <td>&pound;" + item['reserve'] + "</td>\n";
		newlist += "    <td>" + item['expiry'] + "</td>\n";
		newlist += "    <td>\n";
		newlist += "      <button onclick='delete_item(" + item['id'] + ")'>Delete</button>\n";
		newlist += "    </td>\n";
		newlist += "  </tr>\n";
	    }
	}

Save your code, and reload the page in your browser. Get a list of all the items, and check that your buttons appear properly.

We now need to implement the delete_item() function. This is just another XMLHttpRequest action, using the HTTP DELETE action.

function delete_item(item)
{
    // Get the XMLHttpRequest object
    var request = get_request_object();

    // Construct the URI for the item we want to delete
    var uri = "http://localhost:8080/auction/item/" + item;

    // Make the request
    request.open("DELETE", uri, true);
    request.send(null);
}

Reload the page in your broswer to get the new code. Get the list of items, and try deleting one. Check that it actually got deleted by reloading the items. Delete another one – then delete it again, just to make sure.

This isn’t a very good user interface: there is no feedback at all. Try adding an onreadystatechange callback to your delete item request to update the page after the request completes:

   request.onreadystatechange = function() {
       view_all_items();
   }

In the next section, we will revisit the POST action to implement the bidding part of the interface.