AJAX In Action [208]
This project has a lot of steps since it contains dynamic results. To get this project started, let’s look at how the project flows (figure 11.4). Licensed to jonathan zheng 428 CHAPTER 11 The enhanced Ajax web portal Server Grab user Save user preferences preferences Verify login Error Login Build Send users windows changes Browser Figure 11.4 Ajax portal flow. Users log in to the portal and manage their windows. Changes are saved automatically in the background while they work. The basic idea of the rich user interface portal that uses Ajax to interact with the server sounds difficult, but you will be amazed at how simple it is to implement the project. The portal architecture illustrated in figure 11.4 contains two major portions: the initial login and the dynamic interaction with the windows. Thus, we can break our processes into two different sections and adapt the Ajax functionality to meet those needs. The first operation validates a user’s credentials against a database, and the second operation interacts with DHTML elements and returns values to our client. In this chapter, we use a DHTML library to handle a lot of the client-side code. The DHTML library allows us to develop customizable windows that use IFrames to display content. The DHTML windows created by this library can be positioned anywhere on the page since the library supports dragging functionality. Another feature the library supports is resizing of the windows, so we can make the window any size we want. The DHTML library frees us from dwelling on the cross-browser problems that we might encounter with these actions. Instead we can focus on adding the Ajax technology into this library to make a dynamic script even more powerful by integrating it with the server. The implementation that we’ll present here uses Java on the server side, simply to provide a little variety from the previous two chapters, which used .NET languages. We’ve kept the implementation fairly simple. Because Ajax can work equally well against any server-side technology, we won’t concentrate on the server-side details. The full source code for the server tier is available as part of the download for this book. Let’s start off by introducing the Ajax login. Licensed to jonathan zheng The Ajax login 429 11.3 The Ajax login The first action we need to take care of is the login procedure to access our portal. To do this, we create the database table, the server-side code to handle the request, and the client-side code that obtains the login information from the user and processes the request. The first step is to design our user table in the database. 11.3.1 The user table The first table we will look at in the database is the users table. It contains three columns. We are using only the bare minimum of information for this project, but we can add more depending on our needs. The three columns in our user table are id, username, and password, and they are created with the basic SQL statement in listing 11.1. Figure 11.5 shows the table in design view mode with the SQL Squirrel database client program (http://squirrel-sql.sourceforge.net). Listing 11.1 The users table schema create table users( id int primary key unique not null, username varchar(50) not null, password varchar(50) not null ); Now that we have created the table, we need to add some users. In this case, we hard-code in the usernames and passwords. As you can see in figure 11.6, two users have been added to the table with the ID numbers of 1 and 2. Those ID numbers will be important later on in this chapter. Next, we need to set up the user accounts for the users in the table. As it stands, the portal doesn’t present an administrative user interface for adding new users, and this would have to be done manually