In this 'how to' tutorial you will learn how to best display categories with their associated items. Here, the categories and items are represented by continents and countries, but resembling applications can be built for other similar cases: departments and employees, companies and contacts, writers and books, categories and products etc.
Since there are two general situations in this matter, this tutorial will cover both of them. The two situations are:
You are dealing with many categories, each one of them having only few items:
In this case, you want to display the categories in a certain number of columns, and list the few associated items below each category name. Take a look at the display style here.
If you are in this situation, after reading this page, continue with the Display many categories with few items topic.
You are dealing with few categories, but each one of them has lots of items:
In this case, you want to display the categories one below each other, and list the many associated items in a few columns, below each category name. Take a look at the display style here.
If you are in this situation, after reading this page, continue with the Display few categories with many items topic.
If you have the MX Kollection 3 bundle installed, then you have all the needed tools to build this application. Otherwise, the following separate products should be installed on your computer in order to complete the How to display items grouped by category tutorial:
The estimated completion time for this tutorial is 20-25 minutes. It also depends on your authoring knowledge with Dreamweaver and MX Kollection 3.
The same database structure, clear and simple, will be used in both
situations (since the tutorial goal is didactic). It uses the following
two tables:
Note: The database diagram in the image above was built with MX Query Builder (also referred as QuB) to better illustrate the database structure. You do not need to build it in order to complete this 'how to' tutorial.
The continent_con table stores data about continents:
id_con - continent ID.
name_con - continent name.
The country_cnt table stores data about countries:
id_cnt - country ID.
name_cnt - country name.
idcon_cnt - ID of the continent where the country is placed.
There is a one-to-many relation between the two tables: one continent can have more countries, while a country belongs to one continent.
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\_HOW_TO\Display items grouped by category\db\ folder.
In order to complete this tutorial, you only need one file in the Dreamweaver site. Create it and name it:
many_categories - if you are in the first situation (many categories with few items).
many_items - if you are in the second situation (few categories with lots of items).
Before you start building the actual application, open the site page you just created and define a Dreamweaver database connection: conn_category_items. Configure it to connect to your database server and make it point to the database containing the tables described above.