Creating a JSP Page to Edit Employee Data

In this section, you will create the edit.jsp file that enables users to update an employee record.

  1. Create a new JSP page and name it edit.jsp. Accept all other defaults.
  2. Give the page the same heading as earlier, AnyCo Corporation: HR Application, apply the Heading 2 style to it, and align it to the center of the page.
  3. On the next line, type Edit Employee Record, with the Heading 3 style applied. Align this heading to the left of the page.
  4. Add the JDeveloper style sheet to the page.
  5. Add a jsp:usebean tag. Enter empsbean as the ID, and hr.DataHandler as the Class. Set the Scope to session, and click OK.
  6. Position the cursor after the useBean tag and add another jsp:usebean tag. This time enter employee as the ID, browse to select hr.Employee as the class, and leave the Scope as page. Click OK.
  7. Add a Scriptlet to the page. The scriptlet code passes the employee ID to the findEmployeeById method and retrieves the data inside the Employee bean. Enter the following code in the Insert Scriptlet dialog box: 
    Integer employee_id = new Integer(request.getParameter("empid"));
employee = empsbean.findEmployeeById(employee_id.intValue());
  8. Add a Form to the page. In the Insert Form dialog, enter update_action.jsp for the Action field. You cannot select this page from the list as you have not yet created it.
  9. Add a Table to the page. Position it inside the Form. Specify a 6-row and 2-column layout, and accept other layout defaults.
  10. In the first column, enter the following headings, each on a separate row: First Name, Last Name, Email, Phone, Job, Monthly Salary.
  11. Drag a Hidden Field component from the HTML Forms page of the Component Palette. Drop it in the second column, adjacent to the First Name heading. In the Insert Hidden Field dialog, enter employee_id as the Name property and enter <%= employee.getEmployeeId()%> as the Value property.
  12. Drag a Text Field component to this column, adjacent to the First Name heading. In the Insert Text Field dialog, enter first_name in the Name field, and <%= employee.getFirstName()%> in the Value field. Click OK.
  13. Drag a second Text Field component to this column, adjacent to the Last Name heading. In the Insert Text Field dialog, enter last_name in the Name field, and <%= employee.getLastName() %> in the Value field. Click OK.
  14. In a similar way, add text fields adjacent to each of the remaining column headings, using email, phone_number, job_id, and salary as the field names and the corresponding getter method for each field. These are specified in the following table.
    Name Field Value Field

    email

    <%= employee.getEmail() %>

    phone_number

    <%= employee.getPhoneNumber() %>

    job_id

    <%= employee.getJobId() %>

    salary

    <%= employee.getSalary() %>
  15. Add a Submit button in the form, below the table. Enter Update as its Value.
  16. Save the application.

    The resultant edit.jsp page should look similar to the page shown in Figure 5-4.

    Figure 5-4 Creating a JSP Page to Edit Employee Details

    Description of Figure 5-4 follows
    Description of "Figure 5-4 Creating a JSP Page to Edit Employee Details"