close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Web development tutorial

Create an order history page

Tutorial created by Team WebAssist

Categories: Data Bridge, eCart

rating

Order History pages can be very useful, they allow your customers to keep track of what they have purchased, and can be further enhanced to function as a Download Center if you are selling digital goods.

This How To guides you through creating an Order History page, and a customer’s Order Detail page to display their orders.

arrow downBefore you begin

In order to successfully accomplish the steps describe in this document, you should first follow the steps in the following tutorial in order to implement register and login functionality for customers.

Applying Login/Registration to your checkout page

arrow downWhat you need to start

  1. Dreamweaver CS3 or higher
  2. Dreamweaver site with eCart checkout functionality with registration already created.
  3. Data Bridge
  4. WebAssist Free eCommerce MySQL database (Optional)
    ecommerce-database.html
This tutorial refers to the Free eCommerce MySQL database that is provided by WebAssist. This database contains all the necessary tables and columns to complete this tutorial. If you are not using this database, you will need to review the table and column references to make sure they match up with your database structure.

arrow downRecord Customer Details

The first step is to ensure that the Customer ID for the customer who is making the purchase is going to be recorded in the database along with the details for the order.

You will need to have configured eCart to store the cart summary in your database. You can confirm this by checking to see if an eCart Store Summary in Database server behavior exists in the Server Behaviors panel of the confirm page.

Step 1: Creating the OrderUserID column in your database

First, you need to create the database column in your orders table for storing the customer/user ID.

If you are using the Free eCommerce Database from WebAssist, this column will already exist and you are probably already storing this information in your database, so you can skip this step.
  1. Using your preferred database manipulation tool, open the orders table, or the table that you are using to store your order summary.
  2. Insert a new column to your database, name this column OrderUserID.
  3. Specify this column as the Integer Datatype.

Step 2: Update the server behavior

  1. In Dreamweaver, open your eCart confirm page.
  2. From the Server Behaviors panel, double-click on the eCart Store Summary in Database server behavior.
  3. Select the OrderUserID column.
  4. Click the Value lightning bolt.
  5. Expand the Session option.
  6. Select the UserID option.
  7. Depending on the Session Variable used with SecurityAssist, this may be named differently.
  8. Click OK.
  9. Click OK again.


You've now configured eCart to store the customer ID in the database when it records each order. You will now use this information to create the Order History page

arrow downCreating the pages

In this next step, you will learn how to create the Order History page using DataAssist. These steps utilize the DataAssist wizard to create the necessary pages.

Step 1: Creating the Order History page

  1. Open the DataAssist wizard by choosing Insert > WebAssist > DataAssist > DataAssist Wizard.
  2. Choose your database connection.
  3. Choose your orders table, or the database used to store order information
  4. If desired, choose a template to use.
  5. Choose to only create a Results page
  6. For this example, you do not need to create any of the other pages and should uncheck those options.
  7. Name the results page customer_order_history.php.
    Throughout this tutorial, we will use this filename for the results page. Feel free to choose a different filename.

  8. Click Next to proceed through the wizard.
  9. Proceed through the wizard as you would normally, removing any unnecessary database columns from being included on your page, and renaming any others.
  10. The following few adjustments should be made to the Results page options as you proceed through the wizard.
  11. From the Filter menu, choose OrderUserID.
  12. This is the database column that stores the UserID for the order. Your database column may be named differently.
  13. Leave Numeric and (=) selected in the other two menus.
  14. Choose the Session Variable option from the menu below.
  15. Enter UserID in the text field.
    In this example, UserID is the name of the Session Variable used by SecurityAssist.

  16. Proceed through the rest of the wizard and click Finish to create the two pages.

Step 2: Creating the Order History Details page

Next, we will run through the DataAssist wizard again to create the page which will display the details for each order. Even though we will be displaying details, we will be creating a DataAssist Results page only.

  1. Open the DataAssist wizard by choosing Insert > WebAssist > DataAssist > DataAssist Wizard.
  2. Choose your database connection.
  3. Choose the orderdetails table, or the table you use to store your order details.
  4. Leave DetailID for the Key column.
  5. This time, only choose to create a Results page.
    Make sure to uncheck all other pages.
  6. Name the results page customer_order_details.php.

  7. Click Next to proceed through the wizard.
  8. Proceed through the wizard as you would normally, removing any unnecessary database columns from being included on your page, and renaming any others.
  9. On the Results page options step, choose DetailOrderID from the Filter menu.
  10. Leave Numeric/=/URL parameter specified in the other three fields.
  11. Enter OrderID in the text field as shown in the figure below.

  12. Click Finish to create the page.

arrow downApply SecurityAssist

In order to protect the DataAssist pages you just created, we need to apply SecurityAssist.

Before proceeding, make sure to close the pages DataAssist has created in Dreamweaver.
  1. From the WebAssist menu, choose SecurityAssist > Manage Site Access > Access Pages Manager.
  2. Ctrl (Cmd) Click to select both the customer_order_detail.php and customer_order_history.php pages.
  3. From the Grant access if menu, choose Logged in to users.
  4. Choose the browse icon for If access denied, go to.
  5. Select your Login page.

  6. Click OK.
  7. Click OK again to close the Access Pages Manager.

arrow downCustomize Order History

Next, we need to modify the Order History page to go to our Order Detail page.

  1. Open the customer_order_history.php page.
  2. In Design View, highlight the recordset binding that you would want to be linked to the details for the order.
    Typically, this would be the OrderID which displays as {WADAorders.OrderID}.

  3. In the Properties Inspector, choose the File Browse option.
  4. Select the customer_order_details.php page.
  5. Click the Parameters button.
  6. In the Name column, enter OrderID.
  7. Choose the Value column lightning bolt.
  8. Expand the WADAorders Recordset and choose OrderID.

  9. Click OK.
  10. Click OK again to create the link.
  11. Press Ctrl (Cmd) S to save the page.

arrow downCustomize Order Detail

We will now customize the recordset used by the customer order detail page to connect both the orders and the order details tables. This will allow us to display the correct details for each specific order.

  1. Open the customer_order_details.php page.
  2. From the Server Behaviors panel, double-click on the DataAssist Recordset.
    This is most likely named 'WADAorderdetails'.
  3. Select the Advanced button.
    In the Recordset window, we will make a number of modifications. The following section is broken down into multiple steps for greater clarity.
    For each mention of a database table or column, you may need to adjust the new code to match your database's configuration.

    The SELECT statement
    The SELECT statement should currently appear as follows:
    SELECT DetailID, DetailOrderID, DetailProductID, DetailName, DetailPrice, DetailSKU, DetailQuantity

    Depending on the options you selected in DataAssist, you may have different database columns listed.

  4. Change this entire statement to read as follows:
    SELECT orders.*, orderdetails.*

    This modifies the SELECT statement to display all contents from both the orders table (orders.*) and the orderdetails table (orderdetails.*)

    The FROM statement
    The FROM statement should currently appear as follows:

    FROM orderdetails

  5. Change the entire statement to read as follows:
    FROM orders INNER JOIN orderdetails ON orders.OrderID = orderdetails.DetailOrderID

    The INNER JOIN statements are required to connect two different database tables. The statement says that the OrderID column of the orders table relates to the DetailOrderID column of the orderdetails table.
    For a greater understanding of how INNER JOIN statements work, review the following tutorial http://w3schools.com/sql/sql_join_inner.asp.

    The WHERE statement
    The existing WHERE clause was created when running the DataAssist Wizard. We need to add an extra filter to this statement.

    Your current WHERE clause should appear like:

    WHERE DetailOrderID = WADAOrderID

  6. Change the entire statement to read as follows:

    WHERE orderdetails.DetailOrderID = WADAOrderID AND orders.OrderUserID = paramUserID

    The WHERE clause allows you to specify any grouping or filtering options for the query. In this case, we are filtering by the OrderID and a parameter for UserID. Before this will work, we need to create that parameter, which we will do next.
    Once you have modified the entire SQL statement, it should appear like this:

Step 1: Add another Variable (Parameter)

The final step in modifying the SQL statement is to add the Variable to be used by this recordset to work with our new SQL statement.

  1. Click Add ( + ) to create a new variable.
  2. In the name field enter paramUserID.
  3. In the Default value field, enter -1.
  4. In the Runtime value field, enter $_SESSION['UserID'].

  5. Click OK.
    You've now completed modifying this Recordset.
  6. Click OK again to update your Recordset.
  7. Press Ctrl (Cmd) S to save your page.

arrow downCleaning up...

Now that you have updated your recordset, you will be able to display details on the Customer Order Details page from both the orders table and the orderdetails table.

Currently, this page is only displaying content from the orderdetails table. However, you will probably want it to also display information regarding the Order that these details are associated with.

Step 1: Adding additional order details

  1. Highlight the Page Title at the top of the customer_order_details.php page.
  2. Replace 'Page Title' with Details for Order#.
  3. From the Bindings panel, expand the WADAorderdetails Recordset.

  4. Click and drag the OrderID binding to your page at the end of the new page title.
    This way, on the customer_order_details page, the title will display which order these details are for.

Step 2: Additional modifications

You may also want to remove certain details from displaying on the results page. For example, in most cases, displaying the SKU will not be necessary for most pages. To do this, simply highlight what you want to remove, and click delete.

You've now completed the creation of an Order History page for your customers.

For testing your Order History page, you will need to have orders in the database. Perform some test transactions on your site if necessary.

arrow downWhat to do next...

With your Order History completed, there are a number of other features that you might want to add to your online store. For example, if you are selling digital goods, you might want to create a Download Center to allow customers to download their purchases.

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
rating

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

Content

rating

Layout

rating

Ease of use

rating

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.