This is the second in a series of articles related to the development of a simple web application. Here the Part 1
DESIGNING THE FIRST APPLICATION
In this section we will begin to expand our application with different components introducing a new page containing a form for the insertion of input data by the user, creating our first servlets and connecting to a database for storing data. Specifically, the functionality we want to add to our application is the ability to create users and store their information in a database, in order to have access to them at any time. The first thing to do, therefore, is making a diagram of this new feature we want to add and identify the objects that will help us to implement it and the interactions between them.
The figure below shows the schema for the “create user” functionality of our application:
Creating a user will then go through the following steps:
- The user lands on the homepage
- From the homepage, the user can click on “Create New User”
- This will open a new page with a form for entering user data
- The user clicks the “create” button
- The http POST request is sent to the Servlet called AddUser
- The Servlet inserts data about the user just created in the database
- The servlet forwards the request to a JSP page
- The JSP page indicates that the user has been created and shows its information
CREATE THE INPUT FORM
Let’s start by creating the new page that will contain the form for data entry.
In our Eclipse project we right click on the WebContent folder, select the “New” item in the context menu, then choose “HTML file”. We insert in the wizard that appears the name of our new page, “createuser.html” and then we click “Finish” (For the moment we just skip the choice of the DTD – Document Type Definition to use).
Insert in the new page the code for the creation of the form fields in which the user must enter data for its registration. Having defined the USER object as consisting of three values of type string, let’s put on our webpage their relevant input areas and the button to send to our servlet the information contained in the form.
The following picture shows the new page created within the Eclipse project and its source code, containing the input form.
Now that we have created the new page we can restart the application and see if the page is reached by the link located on the home page and displayed correctly.
If what we have done is correct, the result we get is the one shown in the following picture:
CREATE THE FIRST SERVLET
The next step is to create the servlet who will process the request to create a new user, that will be mapped (more about this topic in a very short) to the target address previously specified by the “action” attribute of the “form” tag and invoked once the user presses the “create” button. To do this we right click on our project, select “New” from the contextual menu, then select again “Servlet”, as shown:
At this point it opens the Eclipse wizard shown in the following picture, in which:
- The “Source folder” field is pre-filled with the path of our source file folder, ie “/WebTest/src” and we keep this value.
- We insert the name of the package we created, where we want then to insert our servlet class: com.dede.app1st.controller
- We insert the class name of our Servlet, called AddUser
- The “Superclass” field is pre-filled with the name of the class our servlet class must extend
Let’s click on “Next” button and proceed with the creation of our Servlet: insert a description of our servlets in the field called “Description” as well and insert the URL on which our servlet will be mapped. The latter operation requires a bit of attention, because the URL we enter must match exactly the one we have referenced in the “action” attribute of the “form” tag in our createuser.html web page.
So, we must invoke the getParameter() method on the object request once for each of the parameters we want to retrieve the value. The value that we have to pass as a parameter is the “name” that we have assigned to the form components. To retrieve, for example, the value that the user entered in the “firstname” field we must use the following code:
First Name: <% String fName = request.getParameter("firstname"); out.print(fName); %>
Now let’s run again our application. So, from the Eclipse toolbar or from the contextual menu select “Run as” and then “Run on Server”. We expect to see in Eclipse the homepage of our application, as we had already seen in the section “THE FIRST EXECUTION OF THE PROJECT.”
Click again on the “Create new user” button, enter the data for creating the user and then submit the form.
The request is routed to the url to which our servlet is mapped to and forwarded to the JSP page that processes it and, as expected, it shows us the message of the successful creation of the user with its own attributes value.
Well, the result is what we expected, so we have our first servlet and our JSP working correctly and able to process requests.
The next step will be to introduce another layer in our architecture, represented by a relational database that will allow us to save and to persist data in our application, and precisely to save in a table information related to our users. We will also imrpove the implementation of the MVC paradigm, introducing the Model of our “User” objects, on which we have glossed over so far, retrieving the information directly from the request and focusing only on their exchange.