Adding a Link to Navigate to an Update Page

In the following steps, you add a link to each row of the employees table on the employees.jsp page, that users will click to edit that row.

  1. Open employees.jsp in the Visual Editor.
  2. Add an extra column to the table that displays employee details. To do this, position the cursor in the last column of the table, right-click and select Table from the shortcut menu, then select Insert Rows Or Columns. In the Insert Rows or Columns dialog box, select Columns and After Selection and click OK.
  3. This extra column will contain the link that reads Edit for each row. Each of these links leads to a separate page where the selected employee record can be edited. To do this, double-click the scriptlet that is inside the Employees table, to display the Scriptlet Properties dialog box.
  4. Modify the scriptlet to include a link to the edit.jsp page. The modified scriptlet should contain the following code:
        while (rset.next ())
        {
        out.println("<tr>");
          out.println("<td>" + 
          rset.getString("first_name") + "</td><td> " + 
          rset.getString("last_name") + "</td><td> " + 
          rset.getString("email") + "</td><td> " + 
          rset.getString("job_id") + "</td><td>" + 
          rset.getString("phone_number") + "</td><td>" + 
          rset.getDouble("salary") + 
          "</td><td> <a href=\"edit.jsp?empid=" + rset.getInt(1) +
          "\">Edit</a></td>");
        out.println("<tr>");
        }
    

    When the edit link is clicked for any employee, this code passes the employee ID to the edit.jsp page, which will handle the employee record updates. The edit.jsp page will use this to search for the record of that particular employee in the database.

  5. Save employees.jsp. Figure 5-3 shows employees.jsp when it is run and displayed in a browser, illustrating the link users can click to edit employee data.

    Figure 5-3 Link to Edit Employees in employees.jsp

    JSP containing link to edit employee data