Lesson 8: Create an update page

In this exercise, you will create the web page that allows users to update the CUSTOMER table. This page will receive the parameter that the other page passed, display only the record indicated by that parameter, and accept updated information for the record.

Create the updatecustomer.jsp file

About this task

Procedure

In the Enterprise Explorer view, right-click the WebContent folder of the EGLWeb project.
Click New > Web page.
In the File Name field, type this text as the name of the new file:
```
updatecustomer.jsp
```
Make sure that the Folder field lists the /EGLWeb/WebContent folder.
In the Template list, click My Templates.
In the Preview box, click the A_gray.htpl template.
Click Finish.
The new page is created and opens in the editor.
Replace the default text with this text:
```
Update customer information
```
Press Enter three times to insert three blank lines.
Save the page.

Results

The new updatecustomer.jsp page looks like this:

Appearance of updatecustomer.jsp page

Add an EGL record and display it on the page

About this task

The next step is to add EGL data to this page. When you created the allcustomers.jsp file, you added the data to the page in one step and then displayed the data on the page by dragging it from the Page Data view in a second step. This time, you will select the Add controls to display the EGL element on the web page check box to add the data to the page and display it on the page in one step.

Procedure

Open the EGL drawer on the Palette view.
Drag the New Variable icon onto the page, below the text "Update Customer Information."
The Create a New EGL Data Variable window opens.
Under Type Selection, click Record.
Under Record Type, click Customer.
In the Enter the name of the field field, type the following text:
```
customer
```
Under Array Properties, clear the Array check box.
Select the Add controls to display the EGL element on the web page check box.
Click OK.
The new record appears in the Page Data view and the Insert Control window opens.
In the Insert Control window, click Updating an existing record.
Click Options.
The Options window opens.
Select the Submit button check box.
Clear the Delete button check box.
For the Label of the Submit button, type this text:
```
Update this record
```
Click OK.
Click Finish.
Save the page.

Results

The data controls for updating the record are inserted on the web page. Note that there is an {Error Messages} control on the page. This control does not mean that your page has errors; the {Error Messages} control marks the place where run time error messages will be displayed.

The page looks like this:

Appearance of updatecustomer.jsp page

Retrieve the data

About this task

Now that there are fields for the data on the page, you need to add the code that retrieves the data from the database. Recall from the previous lesson that you added a link to pass the customer ID number in a parameter named CID. In these steps, you will set up the handler for new web page to accept this parameter and retrieve the appropriate record from the database to be displayed on the page.

Procedure

Right-click anywhere in the free-form area of the updatecustomer.jsp file.
From the popup menu, click Edit Page Code.
The updatecustomer.egl file opens in the editor.
As in the previous JSF Handler you edited, you need to add a record to store the success or failure code of the SQL call. Immediately after the line customer Customer;, add the following code, exactly as written:
```
status StatusRec;
```
The next step in adding the data to the page is to configure the JSF handler to accept the CID parameter that the link will pass to it.
Change the line function onPreRender() to the following code, exactly as written:
```
function onPreRender(CID INT)
```
Now the JSF handler is configured to accept an integer parameter named CID.
On a blank line immediately after the function onPreRender(CID INT), add this code, exactly as written:
```
customer.customerId = CID;
```
Now you have assigned the ID number to the customer record. The next step is to retrieve the record with this ID number from the database
On the next line, add this code, exactly as written.
You may want to use the code completion feature you learned about in Lesson 6: Add data to the page.
```
CustomerLib.GetCustomer(customer, status);
```
The GetCustomer function works just like the GetCustomerAll function you used previously, but the GetCustomer function retrieves one record, while the GetCustomerAll function retrieves an array of records.
Now the customer record contains the record with the ID passed to this JSF handler.
The new function looks like this:
```
	function onPreRender(CID INT)
		customer.CustomerId = CID;
		CustomerLib.GetCustomer(customer, status);
	end
```
Optimize imports and save the file.

Results

The JSF handler looks like this:
Appearance of the updatecustomer.egl file

Now when you click a link on the allcustomers.jsp page, the updatecustomer.jsp page loads with details about that customer's record. Right now, you can change the information in the fields on the web page, but there is no function to send those updates to the database. In the next section, you will use the UpdateCustomer function to make those updates to the database.

Update the record in the database

About this task

In this section, you add a new EGL function in the JSF handler named updateRecord. Then, you will bind this function to the button you created on the web page. In this way, when you click the button on the web page, the updateRecord function will run and call the UpdateCustomer function to update the database record. Finally, the updateRecord function will forward the browser back to the allcustomers.jsp page so you can see the changes you have made to the record.

Procedure

In the updatecustomer.egl file, immediately before the final End statement, add the following function, exactly as shown.
You might want to use code completion or to paste the function from this page to make sure it is correct.
```
function updateRecord()
  CustomerLib.UpdateCustomer(customer, status);
  forward to "allcustomers";
end
```
Save and close the file.

The next step is to bind this function to the button on the web page.
Open the updatecustomer.jsp page in the editor.
You may still have this page open in the editor tabs. If you cannot find it there, double-click the updatecustomer.jsp file in the Project Explorer view, in the folder EGLWeb/WebContent.
In the Page Data view, expand JSF Handler > Actions.
This folder lists all of the functions in the JSF handler except the onPreRender() and onConstruction() functions. In this case, this folder shows the updateRecord() function that you just created.
Drag the updateRecord() function directly onto the button on the web page labeled "Update this record".
The appearance of the page does not change, but now this function is bound to the button and will run when the button is pressed.
Save the page.

Results

Here is the complete code of the updatecustomer.egl file. If you see any errors marked by red X symbols in the file, make sure your code matches the code in this file: Completed updatecustomer.egl file after lesson 8
Appearance of the updatecustomer.egl file

Test the finished site

About this task

Now the site is ready to test. You can now update and view any of the records in the Customer table of the database.

Procedure

In the Enterprise Explorer view, right-click the allcustomers.jsp file and then click Run As > Run on Server.
The related page opens in the web browser. Now each customer last name in the list is a hyperlink to the web page displayed by updatecustomer.jsp.
Click one of the customer last names.
You are sent to the web page displayed by updatecustomer.jsp, and that web page shows the row-specific information.
Type a new FIRST_NAME for the record.
Type new information for a few of the other fields on this page. Do not change the CUSTOMER_ID field.
When you are finished typing new information, click the Update this record button.

Results

When you click the Update this record button, you return to the page allcustomers.jsp. Note that the record has changed to show the new FIRST_NAME you typed. You can click on the last name for that record again to see the new information that was saved in the database.