Chapter 4. Practice Projects

Table of Contents

1. Project 1 - Managing Information about Movies
2. Project 2 - Managing Information about Countries

In most parts of the following projects you can follow, or even copy, the code of the book data management app presented in the tutorial. Like in the book data management app, you can make the simplifying assumption that all the data can be kept in main memory. So, on application start up, the data is read from the persistent data store. When the user quits the application, the data has to be saved to the persistent data store, which should be implemented with JavaScript's Local Storage API, as in the tutorial, or with the more powerful IndexedDB API.

For developing the apps, simply follow the sequence of seven steps described in the tutorial:

  1. Step 1 - Set up the Folder Structure

  2. Step 2 - Write the Model Code

  3. Step 3 - Initialize the Application

  4. Step 4 - Implement the Retrieve/List All Objects Use Case

  5. Step 5 - Implement the Create Object Use Case

  6. Step 6 - Implement the Update Object Use Case

  7. Step 7 - Implement the Delete Object Use Case

Also make sure that

  1. your HTML pages comply with the XML syntax of HTML5, preferably by checking with XHTML5 validation (setting the validator field Preset to "HTML5 + SVG 1.1 + MathML 3.0"),

  2. international characters are supported by using UTF-8 encoding for all HTML files,

  3. your JavaScript code complies with our Coding Guidelines and is checked with JSLint (; it must pass the JSLint test (e.g. instead of the unsafe equality test with "==", always the strict equality test with "===" has to be used).

If you have any questions about how to carry out the following projects, you can ask them on our discussion forum.

If you would like to work on these practice projects with the guidance of a coach, then you should enrol in the introductory online course (book parts 1-3) offered by our partner

1. Project 1 - Managing Information about Movies

The purpose of the app to be developed is managing information about movies. The app deals with just one object type: Movie, as depicted in Figure 4.1 below. In the subsequent parts of the tutorial, you will extend this simple app by adding integrity constraints, further model classes for actors and directors, and the associations between them.

Notice that releaseDate is an attribute with range Date, so you should use the HTML <time> element in the list objects table, as discussed in Section 9.2 above.

Figure 4.1. The object type Movie

The object type Movie

You can use the following sample data for testing your app:

Table 4.1. Sample data

Movie ID Title Release date
1 Pulp Fiction 1994-05-12
2 Star Wars 1977-05-25
3 Casablanca 1943-01-23
4 The Godfather 1972-03-15

Variation: Improve your app by replacing the use of the localStorage API for persistent data storage with using the more powerful IndexedDB API.