Plan the AJAX panels application

When developing web applications, if you are using a database, designing it first is essential. The database used in this tutorial has a very simple and clear structure. It uses only one table:

Note: The database diagram in the image above was built with MX Query Builder (an InterAKT product, also referred as QuB) to better illustrate the database structure. You do not need to build it in order to complete this tutorial.

1. The news_nws table stores data about the news published by the company:

2. • id_nws - news ID.

   • title_nws - news title.

   • description_nws - news description (summary).

   • body_nws - news body (content).

   • date_nws - date when news were published.

To quickly create the database (structure and records), use the scripts provided in the .zip package (either .sql or .mdb) corresponding to your database server. You can find the scripts in the \tutorials\Using AJAX Panels\db folder.

Before you start building the actual application, there are a few things that you should do:

1. Create a new site in Dreamweaver and make sure it is correctly configured (set the Local Info, Remote Info, and Testing Server just like for any other functional site of yours).
   
   Note: Do not skip to set the server model - in order to provide graceful degradation for your web application, MX AJAX Toolbox needs a server technology. This way, even when JavaScript is disabled in the client’s browser, your artists/albums catalog will still be available to visitors.
   The supported server models are PHP ADODB (provided by PHAkt) and PHP MySQL.
                               

2. Create a file in your Dreamweaver site root and name it index. This will be the main site page where the CSS layout will be designed and the AJAX panels inserted.
   
   Note: The other files will be automatically generated in the site root when you create the AJAX elements needed (panels, tabset, panel states).
                                

3. Open the index file and define a Dreamweaver database connection: conn_AJAX_panels. Configure it to connect to your database server and make it point to the database containing the table described above.

4. Copy the \tutorials\Using AJAX Panels\portfolio and \tutorials\Using AJAX Panels\logos folders from the .zip package in the local site root. The portfolio folder contains the image files used for the photo gallery, and the logos folder contains images that you will use for the site header and nuggets on the right.

Note: For more information on configuring your site and creating the database connection, please consult the Getting started help file. This can be found inside Dreamweaver's Help menu, InterAKT -> Getting Started.

Continue with the next topic to design the CSS layout for your site.