Show TOC Start of Content Area

Procedure documentation Developing the Web Front End  Locate the document in its SAP Library structure

Use

To complete the application, you have to develop its presentation layer. It is Web-based and consists of a static HTML and a servlet that communicates with the implementation of the data access interface to send the user input, and to return the results of the database operations.

Prerequisites

You must have created the GettingStartedOpenSQLWeb project.

You must have implemented the DAO interface using both SQLJ and JDBC.

Procedure

Creating the HTML Page

I...

       1.      In the J2EE Development perspective, select GettingStartedOpenSQLWeb and open its context menu.

       2.      Choose New HTML. Enter index as the page name.

       3.      Choose Finish.

       4.      The HTML file opens automatically. In the Source tab enter the source of the page. It should contain forms for the following functions:

¡        Creating new department

¡        Creating new employee

¡        Selecting the employees from a department with a given ID

¡        Switching between SQLJ and JDBC

Here is the source of the HTML page:

Example

<html>

<head>

      <meta http-equiv= "Content-Type" content= "text/html" >

      <title> Getting Started With Java Persistence </title>

      <style type="text/css">

            h2 { text-align:left; }

            h4 { text-align:left; }

            h5 { text-align:left; margin-left:0; margin-right:0}

            .framed { border:solid 1px; }

            .narrow { margin-top:1px; margin-bottom:1px }

      </style>

</head>

<body>

      <h4 class="narrow"> SAP WEB APPLICATION SERVER </h4>

      <hr>

      <h2>Getting Started With Relational Persistence</h2>

      <h4>Select an option and enter the relevant data. To confirm, use <i>Submit</i>. The department ID is <u>required</u> for all options.</h4>

      <h5 class="narrow">Recommended sequence:</h5>

      <blockquote>

      <h5 class="narrow">1. Create a department</h5>

      <h5 class="narrow">2. Create employees within the department</h5>

      <h5 class="narrow" style= "margin-bottom: 10px">3. List employees </h5>

      </blockquote>

      <form method= "POST" action= "ProcessInput" >

      <table class="framed" style= "background-color:lightblue" >

            <tr>

               <td class="framed">Department ID: <input type= "text" name= "DEPID" size= "10" value="1"></td>

            </tr>

            <tr>

                <td class="framed"><input type= "radio" value= "NEW_DEP" name= "ACTION" > New Department:</td>

             <td class="framed">

               <table>

                     <tr>

                         <td> Name:</td>

                         <td><input type= "text" name= "NAME" size= "30"></td>             

                     </tr>

               </table>

                </td>

            </tr>

            <tr>         

                <td class="framed"><input type= "radio" name= "ACTION" value= "NEW_EMP" > New Employee:</td>

                <td class="framed">

                  <table>

                        <tr>

                            <td>Employee ID:</td>

                            <td><input type= "text" name= "EMPID" size= "10"</td>

                        </tr>

                        <tr>

                            <td>First Name: </td>

                            <td><input type= "text" name= "FIRST_NAME" size= "30" ></td>

                        </tr>

                        <tr>

                            <td>Last Name: </td>

                            <td><input type= "text" name= "LAST_NAME" size= "30" ></td>

                        </tr>

                        <tr>

                            <td>Salary: </td>

                            <td><input type= "text" name= "SALARY" size= "10"></td>

                        </tr>

                  </table>

              </td>

            </tr>

            <tr>

                <td class="framed"><input type= "radio" name= "ACTION" value= "LIST" checked>List Employees</td>

            </tr>

      </table>

      <table>

            <tr>

                <td><input type="radio" value="SQLJ" checked name="DAO">SQLJ</td>

                <td><input type="radio" value="JDBC" name="DAO">JDBC</td>   

            </tr>

      </table>

      <p><input type="submit" value="Submit" name="B3"></p>

     </form>

</body>

</html>

 

       5.      Save and close the file.

Creating the Servlet

...

       1.      In the J2EE Development perspective, select GettingStartedOpenSQLWeb and open its context menu.

       2.      Choose New Package. Enter temp.persistence.gettingstarted.web as the package name and choose Finish.

       3.      In the context menu of GettingStartedOpenSQLWeb choose New Servlet. Enter ProcessInput as the servlet name. Choose HTTP Servlet for Servlet Type. To choose a package, use Browse… next to the Servlet Package field, and choose temp.persistence.gettingstarted.web from the list.

       4.      Choose Finish.

       5.      The file opens for editing automatically once it has been created. Edit its code as follows:

                            a.      Implement the doGet() method, which receives the input from the HTML page and invokes the relevant methods of the SqljDAO and JdbcDAO classes:

Example

protected void doGet(

HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

   response.setContentType("text/html");

   DAO dao = null;

   PrintWriter out = response.getWriter();

   try {

      out.println("<html><body>");

      String action = request.getParameter("ACTION");

      int depId = Integer.parseInt(request.getParameter("DEPID"));

      String daoType = request.getParameter("DAO");

      if (daoType.equals("SQLJ")) {

         dao =

            (DAO) Class

               .forName("temp.persistence.gettingstarted.dao.SqljDAO")

               .newInstance();

         out.println("<h4>Using SQLJ</h4>");   

      } else {

         dao =

            (DAO) Class

               .forName("temp.persistence.gettingstarted.dao.JdbcDAO")

               .newInstance();

         out.println("<h4>Using JDBC</h4>");   

      }

      try {

         if (action.equals("NEW_DEP")) {

            String depName = request.getParameter("NAME");

            dao.createDepartment(depId, depName);

            dao.commit();

            out.println("Department \"" + depName + "\" created.");

         } else if (action.equals("NEW_EMP")) {

            int empId = Integer.parseInt(request.getParameter("EMPID"));

            String firstName = request.getParameter("FIRST_NAME");

            String lastName = request.getParameter("LAST_NAME");

            BigDecimal salary =

               new BigDecimal(request.getParameter("SALARY"));

            EmployeeData data =

               new EmployeeData(

                  empId,

                  firstName,

                  lastName,

                  salary,

                  depId);

            dao.createEmployee(data);

            out.println(

               "Employee \""

                  + firstName

                  + " "

                  + lastName

                  + "\" created.");

            dao.commit();

         } else if (action.equals("LIST")) {

            EmployeeData[] emps = dao.getEmployeesFromDepartment(depId);

            if (emps.length == 0) {

               out.println("<br>no data");

            } else {

               out.println("<table><tr>");

               out.println("<td>Employee ID</td>");

               out.println("<td>First Name</td>");

               out.println("<td>Last Name</td>");

               out.println("<td>Salary</td>");

               out.println("<td>Department ID</td></tr>");

               for (int i = 0; i < emps.length; i++) {

                  out.println("<tr>");

                  out.println("<td>" + emps[i].getEmpId() + "</td>");

                  out.println(

                     "<td>" + emps[i].getFirstName() + "</td>");

                  out.println(

                     "<td>" + emps[i].getLastName() + "</td>");

                  out.println("<td>" + emps[i].getSalary() + "</td>");

                  out.println("<td>" + emps[i].getDepId() + "</td>");

                  out.println("</tr>");

               }

               out.println("</table>");

            }

         } else {

            out.println("Illegal action: " + action);

         }

      } finally {

         dao.close();

      }

   } catch (Throwable ex) {

      out.println("Exception caught");

      out.println("<code>");

      ex.printStackTrace(out);

      out.println("</code>");

   } finally {

      out.println("<p><a href=index.html>Home</a></p>");

      out.println("</body></html>");

   }

}

 

                            b.      Implement the doPost() method, which invokes doGet():

Example

protected void doPost(

   HttpServletRequest request,

   HttpServletResponse response)

   throws ServletException, IOException {

   doGet(request, response);

}

 

                            c.      To add the required imports, position the cursor anywhere in the Java editor and open the context menu. Choose Source Organize Imports. The following import declarations are added to the existing ones:

Example

import java.io.PrintWriter;

import java.math.BigDecimal;

 

import temp.persistence.gettingstarted.dao.DAO;

import temp.persistence.gettingstarted.dao.EmployeeData;

 

       6.      Save and close the file.

Result

You have developed all components of the example application. The next step is its assembly.

 

End of Content Area