Chapter 3. Building a Minimal Java Web App in Seven Steps

Table of Contents

1. Step 1 - Set up the Folder Structure
2. Step 2 - Write the Model Code
2.1. Storing Book objects in a database table books
2.2. Creating a new Book instance and storing it
2.3. Retrieving all Book instances
2.4. Updating a Book instance
2.5. Deleting a Book instance
2.6. Creating test data
2.7. Clearing all data
3. Step 3 - Configure the App
3.1. Create the EntityManager and UserTransaction objects
3.2. Configure the JPA database connection
3.3. Create the main template
3.4. Define the managed beans needed in facelets
3.5. Build the WAR file and deploy it to TomEE
4. Step 4 - Implement the Create Use Case
5. Step 5 - Implement the Retrieve/List All Use Case
6. Step 6 - Implement the Update Use Case
7. Step 7 - Implement the Delete Use Case
8. Run the App and Get the Code
9. Possible Variations and Extensions
9.1. Accessibility for Web Apps
9.2. Using resource URLs
9.3. Dealing with date/time information using Date and <time>
9.4. Using an alternative DBMS
10. Points of Attention
10.1. Code clarity
10.2. Boilerplate code
10.3. Offline availability
10.4. Architectural separation of concerns

In this chapter, we build a simple Java web application with the Java Persistence API (JPA) for object-to-storage mapping and Java Server Faces (JSF) as the user interface technology. Such an application requires a web server (as a back-end) environment executing the Java code, but also consists of HTML, CSS and possibly some auxiliary JavaScript front-end code that is executed on the user's computer. Since essentially all data processing (including constraint validation) is performed on the back-end, and the front-end only renders the user interface, we can classify Java/JPA/JSF web applications as back-end web apps.

JPA is a Java API for the management of persistent data in Java applications. It uses the Java Persistence Query Language (JPQL), a platform-independent object-oriented query language, which is heavily inspired by SQL, and its query expressions are quite similar to SQL query expressions, but they are executed in the context of JPA entity objects.

JSF is a Java specification for building component-based user interfaces for web applications. Its current version, JSF 2, by default, uses Facelets as its template technology. In contrast, JSF 1 has used JavaServer Pages (JSP) as its default template technology.

In this tutorial, we show how to develop, deploy and run a simple example app using the TomEE web server, which provides an execution environment for Java/JPA/JSF web apps. We assume that you have already installed the TomEE PLUS web server, the MySQL DBMS, and the ANT build tool on your computer.

The purpose of our example app is to manage information about books. For simplicity, in this chapter we deal with a single object type Book, as depicted in Figure 3.1.

Figure 3.1. The object type Book.

The object type Book.

The following is a sample data population for the model class Book:

Table 3.1. Sample data for Book

ISBN Title Year
006251587X Weaving the Web 2000
0465026567 Gödel, Escher, Bach 1999
0465030793 I Am A Strange Loop 2008

What do we need for a data management app? There are four standard use cases, which have to be supported by the app:

  1. Create a new book record by allowing the user to enter the data of a book that is to be added to the collection of stored book records.

  2. Retrieve (or read) all books from the data store and show them in the form of a list.

  3. Update the data of a book record.

  4. Delete a book record.

These four standard use cases, and the corresponding data management operations, are often summarized with the acronym CRUD.

For entering data with the help of the keyboard and the screen of our computer, we use HTML forms, which provide the user interface technology for web applications.

For any data management app, we need a technology that allows to store data in persistent records on a secondary storage device, such as a hard-disk or a solid state disk. JPA allows using a great number of different data storage technologies, including many SQL database management systems (DBMS) such as Oracle, MySQL and PostgreSQL. We don't have to change much in the application code for switching from one storage technology to another. Adding the right driver implementation to our Java runtime environment, properly setting up the DBMS and changing the database access configuration is all we need to do. Below, in step 3, we explain how to set up the JPA configuration for MySQL.

1. Step 1 - Set up the Folder Structure

In the first step, we set up our folder structure for the application program code. The application name in this chapter will be "Public Library", and we will use a corresponding name for the application folder, "publicLibrary". Then we create the application structure. There are many ways to do this, like for example to use the Eclipse development environment (and create and configure a Dynamic Web Project). In this tutorial we show how to do it manually, so there is no need to use special tools, except ANT for being able to compile and deploy the application more easily. For your convenience, we provide an ANT script (available for download at the end of this tutorial), which is able to create the folder structure of a web application, compile it to a Web application Archive (WAR) file and then deploy it to a TomEE web server for execution. The application structure (which is compatible with the Dynamic Web Project structure of Eclipse, so it can be imported in Eclipse) is the following:


This folder structure has the following parts:

  1. The src folder contains the app code folder pl, defining the Java package name for the app (as a shortcut of 'public library'), and the folder META-INF with configuration files:

    1. the app code folder pl contains the model and controller code in its subfolders model and ctrl, while the view/UI code is contained in the WebContent folder;

    2. the most important configuration file (and the only one we need for this app) is the persistence.xml file. It contains the configuration for the database connection. The content of this file is discussed in Section 3.2.

  2. The WebContent folder contains various web resources, including template files and custom view files:

    1. the views stores our custom view files for the application, so it represents the View part of the MVC paradigm. Please note that it is not strictly required to name it views, but it makes a lot of sense to do it so, since this is what this folder represents. We will discuss in details about its content, later in this tutorial.

    2. the WEB-INF folder contains the used libraries (jar files) of the project (as part of the lib subfolder), the JSF template files for your pages (as part of the templates subfolder), the faces-config.xml file, which stores the facelets configuration data and the web.xml configuration file, specific to the Tomcat (TomEE) environment server used to run our application.