Section 12.1. Trouble-Ticketing System

12.1. Trouble-Ticketing System

Many information technology groups use some kind of Web-based trouble-ticket system to support their users. These applications allow users to report problems; they also allow support personnel to respond and manage the issue's life cycle. In this use case, we'll be building a small-scale trouble ticketing system. This system works, but it doesn't have all the features you might need in a true production system. This sample application will be fully reliant on AJAX communications, setting it on the far right of the reliance scale.

The trouble-ticketing system has two main components:

• The first component is the back end, which handles database updates, queries, and authentication.

• The second is the JavaScript/HTML front end, which uses AJAX to talk to the back-end services infrastructure.

You may hear a design like this called a Service-Oriented Architecture (SOA), but besides helping us communicate with those familiar with the term, it doesn't help us along the learning process, so you can file away the buzzword for future use. This JavaScript front end will replace the control logic you would normally write on the server. If you're used to a model view controller (MVC) programming abstraction, you can think of moving the view and most of the controller code to the client. Not all of the controller code can be moved though, because the client is still an untrusted entity; in addition, authentication, data cleaning, and mapping service requests to a particular piece of code still have to happen on the server.

The overall design of the JavaScript system is one based on components. Each component contains some HTML code and some JavaScript code that powers it. In other scenarios, you might want to also include the CSS style information directly in the component, but in this case, the style rules were left at a global level. The components are designed so that their HTML is present on the page from its initial load, sitting inside a DIV container that has a display attribute of none. When one of the components is needed, its container is shown. This process reveals the HTML and allows the user to interact with it.

A similar component design can be used in an application that uses AJAX as an enhancement tool. If AJAX components are designed to provide generic user-interface components, they can be used in other projects, but you'll generally still want to make customized versions of them. These versions would do specific tasks, such as providing AJAX logins or searching for users. In this project, the components are application specific; this specificity helps lower their complexity and makes it easier to understand them. It also makes their development faster; many times, I find it useful to wait until after I have done two or three specific implementations of a component before I make a generalized one. This lets you learn about the problem space, and it makes it easier to build a truly reusable component instead of one that works only in cases that match its original use.

To understand the code of our trouble ticket system, we must first look at the tasks it must perform:

• Register new users

• Log in users

• Update user accounts

• Create tickets

• Update tickets

• Assign tickets to users

• Give users a way to see all their assigned tickets

A system that has this level of functionality provides a relatively basic trouble-ticket system, and it offers us more then enough functionality to understand the process of building a fully AJAX-powered application.