Table of Contents
In this chapter, we show how to build a minimal
purpose of our example app is to manage information about books. That is, we
deal with a single object type:
Book, as depicted in the class
diagram of Figure 3.1.
The following table shows a sample data population for the model class
Table 3.1. A collection of book objects represented as a table
|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:
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.
Retrieve (or read) all books from the data store and show them in the form of a list.
Update the data of a book record.
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 maintaining a collection of persistent data objects, we need a storage technology that allows to keep data objects in persistent records on a secondary storage device, such as a hard-disk or a solid state disk. Modern web browsers provide two such technologies: the simpler one is called Local Storage, and the more powerful one is called IndexedDB. For our minimal example app, we use Local Storage.
In the first step, we set up our folder structure for the
application. We pick a name for our app, such as "Public Library", and a
corresponding (possibly abbreviated) name for the application folder, such
as "PublicLibrary" or "MinimalApp". Then we create this folder on our
files. In this folder, we create the subfolders "m", "v" and "c",
following the Model-View-Controller
paradigm for software application architectures. And finally we create an
index.html file for the app's start page, as
discussed below. Thus, we end up with the following folder structure:
MinimalApp src c m v index.html
In the start page HTML file of the app, we load the file
initialize.js and the
model class file:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta charset="UTF-8" /> <title>Minimal JS Front-End App Example</title> <script src="src/c/initialize.js"></script> <script src="src/m/Book.js"></script> </head> <body> ... </body> </html>
The start page provides a menu for choosing one of the CRUD data
management use cases. Each use case is performed by a corresponding page
such as, for instance,
createBook.html. The menu also
contains options for creating test data with the help of the procedure
Book.createTestData() and for clearing all data with