5.6. Creating a User Interface

Our first controller will be used to display customer data and accept input for searches, inserts, edits and deletes.

5.6.1. Creating the Controller for the Customer Interface

Figure 36. Select Add Controller

Figure 37. Creating a controller (1)

Figure 38. Creating a controller (2)

Once it is done, the controller CustomerController will be created, along with five views displaying:

1. the customer list

2. the customer details for one customer

3. create (add) customer form

4. edit customer form

5. delete customer form

Since the Ajax technology and the jqGrid library will be used extensively in our project, the first view, for displaying the customer list as a table, will be enough for our purposes. The rest of the operations will be performed with jqGrid.

Limiting Overhead

We want to be aware of ways to limit the overhead involved in passing data and connections back and forth over the wide-area network. There are techniques that can help us with this.

Limiting Returned Data

The customer list may turn out to be quite big. The entire list from a big table is usually not returned in web applications because it could make the process of loading the page seriously slow. Instead, the data are usually split into pages or are dynamically loaded when the user scrolls down to the end of the page (or grid). We will use the first option in our project.

Limiting Connections

Another characteristic of web applications is that they do not keep any permanent connections to the database because the life of the page generation script is no longer than the time it takes to generate a response to the user request. A connection to the database is actually a rather expensive resource, so we have to save it. Of course, there is a connection pool for reducing the time it takes to establish a connection to the database, but it is still advisable to make a connection to the database only when it is really necessary.

Let the Browser Help You!

One of the ways to reduce the amount of interaction with the database is to do the correctness checking on the user input in the browser. Fortunately, modern HTML5 and JavaScript libraries can do just that. For example, you can make the browser check for the presence of a required field or the maximum length of a string field in the input form.