The Front-End Interface

3. The Front-End Interface

What the front-end interface does. The front-end interface is the collection of screens and controls through which a user works with a database application. A well-designed interface makes the application easy to learn, quick to use and hard to make mistakes with; a poor one frustrates users no matter how good the back-end is. In modern applications the interface is usually a graphical user interface (GUI) — it uses windows, forms and clickable controls rather than typed commands.

Common interface controls. A form in a database application is built from standard components, each with a clear purpose:

• Label — displays a piece of fixed text, such as a caption next to a box ('Customer Name').
• Text box / text field — a box in which the user types a single line of data (a name, a number).
• Text area — a larger box for several lines of text (an address, remarks).
• Button — a control the user clicks to make something happen ('Save', 'Search', 'Delete').
• Check box — lets the user turn an option on or off (yes/no).
• Radio button (option button) — lets the user pick one choice from a small set (Male / Female).
• List box / combo box (drop-down) — offers a list of items to choose from (a list of cities).
• Table / grid — displays many rows of records together, as a spreadsheet-like grid.

Event-driven working. A GUI front-end is event-driven: the program waits, and then reacts to the user's actions, called events. Clicking a button, choosing from a list or pressing a key are all events. For each event that matters, the developer writes a small block of code — an event handler — that says what should happen. For example, the handler for the Save button collects the values from the boxes and sends them to the back-end. In pseudo-code:

WHEN Save button is clicked:
    name  = value in the Name text box
    city  = value in the City combo box
    IF name is empty THEN
        show message "Name is required"
    ELSE
        send the details to the back-end to be stored
        show message "Record saved"

Input validation. A key job of the front-end is validation — checking the user's input before it is sent to the back-end, so that wrong or incomplete data never reaches the database. Typical checks are: a required box is not left blank; a number field really contains a number and lies in a sensible range (an age is not negative); a date is a valid date; and an e-mail or phone number has the right form. Catching mistakes at the front-end gives the user an immediate, friendly message and keeps the stored data clean. …