Chapter 7. Practice Projects

Table of Contents

1. Project 1 - Validate Movie Constraints
2. Project 2 - Validate Country Constraints

For the following projects, you have to to take care of

  1. adding for every property a check function that validates the constraints defined for the property, and a setter method that invokes the check function and is to be used for setting the value of the property,

  2. performing validation before any data is saved in the add and update methods.

in the model code of your app, while In the user interface ("view") code you have to take care of

  1. styling the user interface with CSS rules (for instance, by integrating a CSS library such as Yahoo's Pure CSS),

  2. validation on user input for providing immediate feedback to the user,

  3. validation on form submission for preventing the submission of invalid data.

Make sure that your pages comply with the XML syntax of HTML5 by means of XHTML5 validation (setting the validator field Preset to "HTML5 + SVG 1.1 + MathML 3.0"), and that your JavaScript code complies with our Coding Guidelines and is checked with JSLint (

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 - Validate Movie Constraints

The purpose of the app to be built is managing information about movies. Like in the book data management app discussed in the tutorial, you can make the simplifying assumption that all the data can be kept in main memory. Persistent data storage is implemented with JavaScript's Local Storage API.

The app deals with just one object type: Movie, as depicted in Figure 7.1 below. In the subsequent parts of the tutorial, you will extend this simple app by adding enumeration-valued attributes, as well as actors and directors as further model classes, and the associations between them.

Figure 7.1. The object type Movie defined with several constraints.

The object type Movie defined with several constraints.

In this model, the following constraints have been expressed:

  1. Due to the fact that the movieId attribute is declared to be the standard identifier of Movie, it is mandatory and unique.

  2. The title attribute is mandatory, as indicated by its multiplicity expression [1], and has a string length constraint requiring its values to have at most 120 characters.

  3. The releaseDate attribute has an interval constraint: it must be greater than or equal to 1895-12-28.

Notice that the releaseDate attribute is not mandatory, but optional, as indicated by its multiplicity expression [0..1].

In addition to the constraints described in this list, there are the implicit range constraints defined by assigning the datatype PositiveInteger to movieId, NonEmptyString to title, and Date to releaseDate. In our plain JavaScript approach, all these property constraints are encoded in the model class within property-specific check functions.

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

Table 7.1. Sample movie 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

More movie data can be found on the IMDb website.