close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Build an admin-driven PayPal store

Tutorial created by Ray Borduin, WebAssist

Categories: Data Bridge, Free Tools

rating

In this tutorial, we're going to show you how to set up database-driven product pages with Data Bridge, then use Free Tools to add some PayPal buttons, allowing your customers a quick, trusted checkout. We'll also create some administrative pages you can use to insert products into (or edit products in) your database.

This is a beginner level tutorial, but it has lots of steps, so hold onto your hats, and let's get this party rolling!

arrow downWhat you need to start

  1. A dynamic site set up within Dreamweaver
  2. Dreamweaver CS4 or later
  3. Free Tools installed and activated in Dreamweaver
  4. Data Bridge installed and activated in Dreamweaver
  5. A blank database with a proper connection set up in Dreamweaver
  6. The Tutorial Product Presets, which can be downloaded here
    tutorial_presets.zip

arrow downImport the presets

Well, here we are again at the first step in the tutorial. My personal favorite step, because it sets the tone for the rest of everything ever. in this step we're going to be importing our awesome presets into Data Bridge, so we need to open the Preset Manager. From there we can import the heck out of these presets, and we're onto the next step

  1. Open the tutorial_presets.zip you downloaded in the previous section of this tutorial
  2. Save the files inside of it somewhere easily accessible
  3. In Dreamweaver, click WebAssist > Preset Manager
  4. From the Product drop down, select Data Bridge - Preset
  5. Click the Import button
  6. Browse to the tutorial_admin_preset.zip preset file from the tutorial_presets.zip
  7. Click Open
  8. Repeat the steps for the tutorial_catalog_preset.zip preset


Good. Great. Awesome. You imported the files. I'm impressed.

arrow downCreate Your Product Admin

This step is going to have us creating Product Administration pages through Data Bridge using our newly imported funky fresh presets. Let's do that now, shall we.

  1. Create a blank PHP page in the root of your site
  2. Open the blank PHP page
    This is to make sure DataAssist creates the pages in the correct directory level
  3. Click WebAssist > Database > DataAssist Pages
  4. Change the Application Type to Tutorial Product Administration
  5. Make sure the Create the database table for me is checked
    This is going to let Data Bridge create the correct database setup for this specific tutorial. It'll be awesome
  6. Change the connection to the one pointing to your blank database
  7. Edit the Page Design to exactly how you wish it to be
    For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away

  8. Click the Manage Pages tab
  9. Ensure the pages are named using the following naming conventions:

    1. Search > admin/admin_search.php
    2. Results > admin/admin_results.php
    3. Detail > admin/admin_detail.php
    4. Insert > admin/admin_insert.php
    5. Update > admin/admin_update.php




  10. This is done by following these steps:

    1. Click on the pages under the Define Features section
    2. Change the names under the Page Name & Location field


  11. Click Finish
  12. Uncheck the Save as preset checkbox
  13. Click OK


After Data Bridge works its voodoo and makes your pages, we're ready to move on to the next step! At this point you can test your pages to make sure they work right, and maybe add a few test items that you'll be selling in your fake store.

arrow downCreate Your Product Catalog

Now we're going to be creating the Product Catalog pages. These will be the pages the store patrons will see, if this was going to be a real store. If it IS going to be a real store, then there you go.

  1. Return to the blank PHP page that we created in the root of your site
    This is to make sure DataAssist creates the pages in the correct directory level
  2. Click WebAssist > Database > DataAssist Pages
  3. Change the Application Type to Tutorial Product Catalog
  4. Make sure the Create the database table for me is unchecked
  5. Edit the Page Design to exactly how you wish it to be
    For this tutorial, this step isn't needed, so we're keeping the Page Design as Basic, but edit away

  6. Click the Manage Pages tab
  7. Ensure the pages are named using the following naming conventions:

    1. Search > products_search.php
    2. Results > products_results.php
    3. Detail > products_detail.php


  8. This is done by following these steps:

    1. Click on the pages under the Define Features section
    2. Change the names under the Page Name & Location field


  9. Click Finish
  10. Uncheck the Save as preset checkbox
  11. Click OK


Once more into the breach of making pages within Data Bridge, dear friends, once more. As soon as these pages are made, you can view the product pages for the products you may have added from the first step, and see how the pages will look to your customers. These are the pages we're going to be adding our PayPal buttons to, once we get to that step far in the future. Next up: Adding PayPal buttons to your Product Catalog pages.

arrow downAdd PayPal Buttons

This is the end. This is it. No turning back now. You're all clear kid, so let's blow this thing and go home.

The last step of this magical journey is adding the PayPal Add to Cart buttons onto the pages with Add to Cart buttons in lieu of the existing ones. This is done with Free Tools, and is totally awesome possum.

Step 1: For products_detail.php

  1. Open the products_detail.php page
    Now we need to make sure all the database columns are being pulled from the database so we have access to all of our information for the products.
  2. If the Bindings panel isn't visible, click Window > Bindings
  3. Look for the binding called Recordset (WADAproducts)
  4. Double click the binding to open it
  5. If you're in Advanced view, click the Simple%u2026 button to switch to simple mode
  6. Select the All radio button under Columns
  7. Click OK
    Now we're going to run the following process. this will change the current page's form information and add the button
  8. Switch to Split view
  9. Click on the Add to Cart button in Design view
  10. Click WebAssist > PayPal Standard > Add to Cart Button
  11. Now we're going to configure our button based on the product details for the selected product
  12. Enter your PayPal email address
  13. Click Next
    For this tutorial, we're using a basic PayPal button, but you can use a custom button if you really want to
  14. Select a button you wish to use
  15. Click Next
  16. Click the dynamic data lightning bolt for the Item name/service field
  17. Expand the Recordset (WADAProducts) recordset
  18. Select the ProductName binding
  19. Click OK
  20. Click the dynamic data lightning bolt for the Item ID/number field
  21. Expand the Recordset (WADAProducts) recordset
  22. Select the ProductID binding
  23. Click OK
  24. Click the dynamic data lightning bolt for the Price of item/service field
  25. Expand the Recordset (WADAProducts) recordset
  26. Select the ProductPrice binding
  27. Click OK
  28. Click the dynamic data lightning bolt for the Item Options Name field
  29. Expand the Recordset (WADAProducts) recordset
  30. Select the ProductOption binding
  31. Click OK
  32. Click the dynamic data lightning bolt for the Item Options Values field
  33. Expand the Recordset (WADAProducts) recordset
  34. Select the ProductOptionValues binding
  35. Click OK

  36. Click Next
  37. Fill in any needed fields
    In this tutorial we're leaving them all blank
  38. Click Next
  39. Enter your Success URL
  40. Enter your Cancel URL
  41. Click Finish
  42. SAVE ALL THE THINGS!

Step 2: For products_results.php

  1. Open the products_results.php page
    Now we need to make sure all the database columns are being pulled from the database so we have access to all of our information for the products.
  2. If the Bindings panel isn't visible, click Window > Bindings
  3. Look for the binding called Recordset (WADAproducts)
  4. Double click the binding to open it
  5. If you're in Advanced view, click the Simple button to switch to simple mode
  6. Select the All radio button under Columns
  7. Click OK
    Just like before, we're going to run the following process. this will change the current page's form information and add the button
  8. Switch to Split view
  9. Click on the Add to Cart button in Design view
  10. Click WebAssist > PayPal Standard > Add to Cart Button
    Now we're going to configure our button based on the product details for the selected product
  11. Enter your PayPal email address
  12. Click Next
    For this tutorial, we're using a basic PayPal button, but you can use a custom button if you really want to
  13. Select a button you wish to use
  14. Click Next
  15. Click the dynamic data lightning bolt for the Item name/service field
  16. Expand the Recordset (WADAProducts) recordset
  17. Select the ProductName binding
  18. Click OK
  19. Click the dynamic data lightning bolt for the Item ID/number field
  20. Expand the Recordset (WADAProducts) recordset
  21. Select the ProductID binding
  22. Click OK
  23. Click the dynamic data lightning bolt for the Price of item/service field
  24. Expand the Recordset (WADAProducts) recordset
  25. Select the ProductPrice binding
  26. Click OK
  27. Click the dynamic data lightning bolt for the Item Options Name field
  28. Expand the Recordset (WADAProducts) recordset
  29. Select the ProductOption binding
  30. Click OK
  31. Click the dynamic data lightning bolt for the Item Options Values field
  32. Expand the Recordset (WADAProducts) recordset
  33. Select the ProductOptionValues binding
  34. Click OK

  35. Click Next
  36. Fill in any needed fields
    In this tutorial we're leaving them all blank
  37. Click Next
  38. Enter your Success URL
  39. Enter your Cancel URL
  40. Click Finish
  41. SAVE ALL THE THINGS!




Aaaaaaaaaaaaaaaand done! You've completed it all, and done an amazing job. You should go test your pages and make sure everything works as expected.

arrow downWhat to do next...

You are a genius and have impressed even me. The next step would be to make it more advanced. Maybe add a highly customized button, or add some shipping and handling chargers. Maybe create a whole product catalog and actually start selling.

Whatever you choose to do next, you have the important fundamentals you need to create a nice, simple shopping cart that uses PayPal buttons that pull their info from a Data Bridge database.

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
rating

: 10 Years, 10 Months, 5 Days, 15 Hours, 34 Minutes ago

Thanks for this Tutorial. it helps me alot...

: 10 Years, 9 Months, 2 Weeks, 5 Days, 9 Hours, 31 Minutes ago

I get to the step where I create a new PHP page then I go to WebAssist>Database>DataAssist Pages and it says "Please save the current document before using this interface". So I save it as "WebAssistTut" in the root of my webpage and then go back to WebAssist>Database>DataAssist Pages and I get "No database connection found. You must create a database connection in order to continue."

rating

Team WebAssist: 10 Years, 9 Months, 2 Weeks, 5 Days, 9 Hours, 15 Minutes ago

Make sure you do everything you need to do in the "What you need to start" section at the beginning of this tutorial, including a database connection. If you don't know how to set up a database connection in Dreamweaver, you can use this tutorial:
http://www.webassist.com/tutorials/Create-a-PHP-database-connection

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.