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 two tables:
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.
The menu_mnu table stores data about menu items:
Note: Click here to check out the required database table structure when creating database-driven menus with the Database-driven CSS Menu component. Consult this tutorial if you want to learn how to generate menus using another table structure.
id_mnu - menu item ID.
idmnu_mnu - ID of the parent menu item (NULL for the first-level items).
label_mnu - menu item name.
tooltip_mnu - menu item tooltip (alternative text).
order_mnu - menu item order.
visible_mnu - it specifies if a menu item is visible or not (1/0 values).
url_value_mnu - value of the URL parameter passed.
target_mnu - target type of the page that opens.
The product_prd table stores data about software products:
id_prd - product ID.
name_prd - product name.
logo_prd - product logo filename.
tagline_prd - product slogan.
shdesc_prd - product short description.
desc_prd - product description (presentation).
There is no relation between the two tables.
To quickly create the database structure, 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 MX Includes\db folder.
Before you start building the actual application, there are a few things that you should do:
Create a new site in Dreamweaver and make sure it is correctly configured: set the Local Info, Remote Info, and Testing Server options (since you are using a database, a server model is required).
In order to complete this tutorial, you need nine server model-based files (.php, .asp, .cfm) in the Dreamweaver site. Create them in the site root and name them:
1. index - this is the site main page, in which all the others are included using MX Includes.
2. header
3. footer
4. menu
5. home
6. spring_pack
7. products
8. overview
9. contact
Note: The last five files above have the same name and will have almost the same content as the ones used in this tutorial.
Open one of server model-based pages (e.g. index) and define a Dreamweaver database connection: conn_include_menu. Configure it to connect to your database server and make it point to the database containing the table described above.
From the \tutorials\Another table structure folder in the package, copy the logos folder in the local site root. It contains all the image files (product logos) used in this tutorial - the image names are stored in the database table provided.
Also, from the \tutorials\Using MX Includes\ folder in the package, copy the header folder in the local site root. It contains the image that will be used for the site header.
Note: For more instructions on how to configure your site and how to create the database connection, consult the Getting started help file. It can be accessed in Dreamweaver from the Help menu, InterAKT -> Getting Started.
Continue with the next topic to add content in most the site pages.