Table of Contents
Storage. The purpose of our example app is to manage information about books. That is, we deal
with a single object type:
Book, as depicted in Figure 3.1.
The following is a sample data population for the model class
Table 3.1. Sample data for
|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 harddisk 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 IndexDB. 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". Then we create this folder on our computer's disk
subfolders "model", "view" and "ctrl", 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:
publicLibrary src ctrl model view index.html
The start page of the app loads the
Book.js model class file and provides a
menu for choosing one of the CRUD data management operations performed by a corresponding page
such as, for instance,
createBook.html, or for creating test data with the help
of the procedure
Book.createTestData() in line 17, or clearing all data with
Book.clearData() in line 18:
Figure 3.2. The minimal app's start page