close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Web development tutorial

Create a product catalog (eCommerce Series)

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Dreamweaver, PHP


In this tutorial, Create a product catalog I of the eCommerce series, you will learn if a dynamic product catalog is appropriate for your online store and how to complete the initial set-up. In Create a product catalog II, you will finish the product catalog by creating product administration pages, product catalog pages, and order pages.

A dynamic product catalog is helpful when you sell multiple products that change often or need categorizing. Just as important to know is that you can actually set up a store without having a dynamic product catalog. So before you start down the path of creating a database, you will first determine if this step is necessary or if you should skip directly to the Add a shopping cart tutorial in the WebAssist eCommerce series.

You'll find a linked index including an overview of each tutorial belonging to the eCommerce series at the bottom of this page.

arrow downWhat do you need to start?

  1. Dreamweaver CS4 or higher.
  2. Data Bridge (alternatively, DataAssist) installed and activated in Dreamweaver.
  3. Site defined in Dreamweaver. For assistance, view these tutorials: Define a dynamic site in CS4 or Define a dynamic site in CS5+.
  4. PHP web page and connection in Dreamweaver to your database. For assistance, view this tutorial: Create a PHP database connection.
  5. MySQL database. If you do not have one, you can download our free eCommerce MySQL database in this tutorial.

arrow downDynamic product catalog options

Do you need a dynamic product catalog? Backing up a moment, let's pause to determine whether this two-part tutorial is appropriate for you or if skipping to the the Add a shopping cart tutorial in the WebAssist eCommerce series is warranted.

When wouldn't you need to build a dynamic product catalog? Perhaps you do not sell a variety of products in your store, neither do your products change often or need categorizing. For these situations, creating a database would probably be overkill. Using CSS, HTML, and JavaScript technologies should be sufficient. Another reason for bypassing this tutorial is that your website already has a dynamic product catalog. However you may still need assistance creating a shopping cart, simple and complex product options, check-out, and administrative back-end. The remaining tutorials in this series will walk you through those steps.

When would you need this tutorial? Learning how to create a dynamic product catalog is helpful when you offer multiple products that change often or need categorizing. If so, you will benefit from this tutorial which demonstrates how to use PHP and MySQL database technologies to build your dynamic product catalog. Otherwise, you can safely skip to the last section to review the additional tutorials in the WebAssist eCommerce series and choose your next step.

arrow downDatabase connection options

Data Bridge offers two options for connecting to a database, Dynamic MySQL Connection and MySQL Connection (Dreamweaver's default connection). You can set up a connection for your live website on your hosting company's server using Dynamic MySQL Connection and a connection for testing locally (localhost) using MySQL Connection. (To learn how, follow the link to Create a PHP database connection in the first section of this tutorial.)

The advantage to using Dynamic MySQL Connection is that it holds multiple connections in a single file, eliminating the need for multiple files. For example, a database on localhost would have a username and password. Additionally, a server on GoDaddy would have another set of credentials. With Dynamic MySQL Connection, there would be no need to keep a different connection file on each server. On the other hand, if the database connection was to be used solely for testing, MySQL Connection would be sufficient.

The first step in building your dynamic product catalog is to set up a PHP database connection. Why? Without a connection, your web pages can't communicate with your database.

Now I'd like to draw your attention to a mistake commonly made when filling in the Server Folder and Web URL fields. Server Folder and Web URL must point to the same location. Otherwise, your product pages can't connect to your database. In other words, although you can name your site whatever you wish (I'm using ecommerce in this example), both of the fields must contain the identical site name. You should always verify a successful connection with the Test button before proceeding.

Creating the database connection establishes the connection but does not create data within the database itself.

arrow downPreset options

Using either a sample preset or a custom preset, you can easily create product catalog pages to manage records. For example, I will be using the generic product catalog preset for the Application Type.

A preset is a database structure with a collection of web pages that remembers settings created in an interface to be used again in the future.

But if you are setting up an actual website with a specific product in mind, a generic preset may not be your best choice. In fact, before running the DataAssist wizard, you should first design your website with HTML and CSS. Next you would decide which fields to include in a database to support your design. This upfront planning will result in a database that best accommodates your specific product line.

Continuing that thought, many website owners who have already defined their product line and want to create a catalog often make the mistake of thinking the generic product catalog preset would be their best choice. Actually, this preset is best used as a sample. In contrast, they should proceed with the custom preset <New From Blank> for the Application Type.

Here's a good example, let's say you sell boats. This is a product line that requires unique database fields, such as length-to-beam ratio, wetted surface area, and displacement. In this case, using the generic product catalog preset would require too much customization after creating your pages. You'd be better served by using a custom preset.

If you choose one of the presets during this tutorial and do not make changes, it's not necessary to save it. But if you customize settings or start with <New From Blank>, re-name and save your settings as a custom preset. This is especially helpful if you discover that you've made a mistake during the process. With a saved preset, you will not have to start over from the beginning to correct any errors.

arrow downWhat's your next step?

Now that you have decided a dynamic product catalog is appropriate for your online store and are finished with the initial set-up, proceed to Create a product catalog II (eCommerce Series) where you will learn how to create product administration pages, product catalog pages, and order pages for your dynamic product catalog.

arrow downWebAssist eCommerce series

With eCart technology as the cornerstone of the WebAssist eCommerce series, these in-depth tutorials will walk you through the steps of building an eCommerce site: product catalogs, shopping carts, product options (both static and dynamic), and checkout including payments. Completing the eCart portion of the series is help for setting up a back-end administration to manage your eCommerce business. Additionally, to be used with or without eCart, you will learn about payment gateway providers, hosting solutions, and online shipping accounts.

  1. Introduction to the eCommerce series: An overview of the WebAssist eCommerce series including a detailed description of each tutorial.

  2. Create a product catalog: Learn to create a dynamic product catalog for an online store.

    1. In Create a product catalog I, you will learn if a dynamic product catalog is appropriate for your online store and how to complete the initial set-up.
    2. In Create a product catalog II, you will learn how to create product administration pages, product catalog pages, and order pages for your dynamic product catalog.

  3. Add a shopping cart: Learn about using eCart to create a responsive shopping cart for selling your products online.

    1. Create an eCart object to define the structure of your shopping cart.
    2. Place an Add to Cart button on a product catalog which your customers can use to select items to purchase and add them to their shopping cart.
    3. Design a responsive shopping cart page that holds informational details about the products a customer is purchasing.

  4. Add dynamic product options I: Learn how to add dynamic product options to your website's online store using eCart's shopping cart functionality.

  5. Add dynamic product options II: Learn how to add dynamic product options, which include options within themselves (for example, incremental pricing), to your website's online store using eCart's shopping cart functionality.

  6. Add static product options: Learn how to add static product options to your online catalog store.

  7. Add checkout and administration: Learn how to manage checkout, payments, and the back-end administration of your eCommerce site using the seven tabs in the eCart Checkout Wizard - Settings, Payments, Shipping, Tax, Orders, Email, and Form Design.

    1. In the Settings tab, you will choose the general settings for your site and checkout pages.
    2. In the Payments tab, you will set up payment provider and checkout options.
    3. In the Shipping tab, you will choose shipping providers and set charges.
    4. In the Tax tab, you will set the rules for sales tax or VAT.
    5. In the Orders tab, you will configure your order storage options.
    6. In the Email tab, you will enter your email server settings.
    7. In the Form Design tab, you will select your checkout form from preset designs.

  8. Online payment solutions: Learn about online payment solutions including seamless checkout, remote checkout, and various PayPal checkout options.

  9. Hosting provider solutions: Learn about and choose between five hosting providers, 1&1, GoDaddy, HostGator, Network Solutions, and DreamHost.

  10. Online shipping solutions: Learn where and how to set up free shipping accounts with FedEx, UPS, USPS, and Australia Post.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question





Ease of use


security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.