Part I. Getting Started

In this first part of the book we provide a brief introduction to the Web and show how to build

  1. a simple front-end web app using plain JavaScript and local storage,

  2. a simple back-end web app using Java with JSF, JPA and a MySQL/MariaDB database.

We also provide brief introductions to information modeling and to software application architectures.

The minimal examples of data management apps discussed in this part of the book only include a minimum of the overall functionality required for a complete app. They take care of only one object type ("books") and support the four standard data management use cases (Create/Retrieve/Update/Delete), but they need to be extended by adding further important parts of an app's overall functionality.

Table of Contents

1. A Quick Tour of the Foundations of Web Apps
1. The World Wide Web (WWW)
2. HTML and XML
2.1. XML documents
2.2. Unicode and UTF-8
2.3. XML namespaces
2.4. Correct XML documents
2.5. The evolution of HTML
2.6. HTML forms
3. Styling Web Documents and User Interfaces with CSS
4. JavaScript - "the assembly language of the Web"
4.1. JavaScript as an object-oriented language
4.2. Further reading about JavaScript
5. Accessibility for Web Apps
6. Quiz Questions
6.1. Question 1: Well-Formed XML
6.2. Question 2: HTML Forms
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Strict Mode
1.4. Different kinds of objects
1.5. Array lists
1.6. Maps
1.7. JavaScript supports four types of basic data structures
1.8. Methods and Functions
1.9. Defining and using classes
1.10. Quiz Questions
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
3. A Minimal Web App with Plain JS
1. Step 1 - Set up the Folder Structure
2. Step 2 - Write the Model Code
2.1. Representing the collection of all Book instances
2.2. Creating a new Book instance
2.3. Loading all Book instances
2.4. Updating a Book instance
2.5. Deleting a Book instance
2.6. Saving all Book instances
2.7. Creating test data
2.8. Clearing all data
3. Step 3 - Initialize the Application
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. Using IndexedDB as an Alternative to LocalStorage
9.2. Styling the User Interface
10. Points of Attention
10.1. Catching invalid data
10.2. Database size and memory management
10.3. Boilerplate code
10.4. Serializing and de-serializing attribute values
10.5. Implicit versus explicit form field labels
10.6. Synchronizing views with the model
10.7. Architectural separation of concerns
11. Practice Projects
11.1. Project 1 - Managing information about movies
11.2. Project 2 - Managing information about countries
4. A Minimal Web App with Java EE
1. Java Basics
2. Step 1 - Set up the Folder Structure
3. Step 2 - Write the Model Code
3.1. Storing Book objects in a database table books
3.2. Creating a new Book instance and storing it
3.3. Retrieving all Book instances
3.4. Updating a Book instance
3.5. Deleting a Book instance
3.6. Creating test data
3.7. Clearing all data
4. Step 3 - Configure the App
4.1. Create the EntityManager and UserTransaction objects
4.2. Configure the JPA database connection
4.3. Create the main template
4.4. Define the managed beans needed in facelets
4.5. Build the WAR file and deploy it to TomEE
5. Step 4 - Implement the Create Use Case
6. Step 5 - Implement the Retrieve/List All Use Case
7. Step 6 - Implement the Update Use Case
8. Step 7 - Implement the Delete Use Case
9. Style the User Interface with CSS
10. Run the App and Get the Code
11. Possible Variations and Extensions
11.1. Using resource URLs
11.2. Using an alternative DBMS
12. Points of Attention
12.1. Boilerplate code
12.2. Offline availability
12.3. Architectural separation of concerns
13. Practice Projects
13.1. Project 1 - Managing information about movies
13.2. Project 2 - Managing information about countries
14. Quiz Questions
14.1. Question 1: Casting types in Java
14.2. Question 2: JPA standard identifier property
14.3. Question 3: Valid Java Bean classes
14.4. Question 4: HTML5 attributes with JSF forms
14.5. Question 5: JPQL query
5. Information Modeling
1. Classes with Properties and Methods
2. Connecting Classes with Associations
3. From a Conceptual Model via a Design Model to Class Models
4. Excursion: Formalizing Information Models with RDF and OWL
4.1. RDF vocabularies
4.2. RDF fact statements
4.3. Expressing structured data in web documents
4.4. OWL vocabularies and constraints
4.5. Usability issues of RDF and OWL
5. Summary
6. Exercises
6. Application Architecture
1. The Model-View-Controller (MVC) Architecture Metaphor
2. The Onion Architecture Metaphor
3. "Logical" versus "Physical" User Interface
4. MVC Web Applications
5. Deployment Architectures