AJAX In Action [213]
The text beside the login button in figure 11.9 shows an error message to the user, informing her that the credentials that were provided are incorrect. If, on the other hand, the login is successful, then the request will be forwarded to the main portal page. In this case, the next step is to build our windows. This will require a large amount of DHTML to develop our rich user interface, but the hard work is already done for us because we are using a prewritten JavaScript DHTML library. Figure 11.9 An error message is displayed because of invalid credentials. Licensed to jonathan zheng Implementing DHTML windows 439 11.4 Implementing DHTML windows Our Ajax portal has a rich user interface that allows the user to dynamically position the windows. The user can also set the size of the window to the desired width and height. When the user changes these settings, we can use Ajax to interact with the server to store them as values in our database without the user even knowing anything is happening. To enable this, we need to develop a database table to store the window properties such as height, width, and position. The server-side code needs to receive these new window properties and update the values in the database. Writing browser-compliant DHTML can be complicated, so we are using a DHTML library script to perform the drag, drop, and resizing of the window. A library is nothing more than an external JavaScript file that contains all of the code for a given functionality. You can obtain the JavaScript library, JSWindow.js, for this project with the rest of the book’s downloads. We will need to make only a few modifications to the library to enable Ajax. 11.4.1 The portal windows database We need a database table that can hold the properties of several DHTML windows for each user. Each user can have multiple rows in this table, one for every window she has in her portal. The table is used to retrieve the last-known position and size of the window when the user first logs in. When the user makes changes, the values are then updated so that she can access them at future times and still see the same layout. The following SQL will create the portal_windows table: create table portal_windows( id int primary key not null, user_id int not null, xPos int not null, yPos int not null, width int not null, height int not null, url varchar(255) not null, title varchar(255) not null ); Each user can have multiple windows, all with different configurations. The column named user_id relates to our users database. Each of the windows must have an id as the primary key, so we can use this to save and update properties. Make sure you add the auto increment for the window’s id column. This id column is used by the Ajax code and the DHTML window library to obtain and update the user’s window properties. Licensed to jonathan zheng 440 CHAPTER 11 The enhanced Ajax web portal Figure 11.10 portal_windows database table structure We need two columns to hold the x and y coordinates of our DHTML window. These give us the location of the window on the screen from the upper-left corner of the browser. The column names for coordinates are xPos and yPos. Two other properties we need to capture are the width and height properties of the DHTML window. These are all stored as integers in the table. The last two columns in our database determine the URL of the content within the window and the title of the content that the user assigns as a quick reference. All of the database properties for portal_windows are shown in figure 11.10. Now we need to enter some default values so we can perform some testing. We can add as many windows as we