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

Web development tutorial

Getting Started with Data Bridge

Tutorial created by Team WebAssist

Categories: Data Bridge, CSS, Design, Dreamweaver, MySQL, PHP

rating

Congratulations on your purchase of Data Bridge!

With this undoubtedly wise purchase, you've become the owner of a collection of the most technologically advanced, and lovingly hand crafted Dreamweaver extensions known to man. With Data Bridge, you can create forms with an ease you never thought possible, build completely functional dynamic sites with just a few clicks, and secure your website from pesky ne'er-do-well in the blink of an eye*.

Any website in this day and age will be able to benefit from using one of Data Bridge's utilities. For example; your client wants a contact form added to their site that emails the contact information to them. Well guess what, buddy: Data Bridge will do that in a snap, saving you from the hassle and heartache. We're going to cover this scenario later in the Getting Started Guide.

This Getting Started Guide will help you get the most out of your Data Bridge purchase. We will cover how to get your system configured to make the most of Dreamweaver extension, how to download and install your extension, and how to plan your project.

*Eye blinking speeds may vary.

arrow downRequirements

You will need the following items before starting this tutorial:

  1. Dreamweaver CS4 or later
  2. Data Bridge Installed
  3. PHP/MySQL Testing Server (optional)
    For more information see Setting up a Testing Server on Windows or Setting up a Testing Server on Mac OS X

  4. Dynamic Site Defined in Dreamweaver
    For more information see Defining a dynamic site in Dreamweaver

arrow downWhat are extensions?

In case you don't know yet, Dreamweaver extensions are tools (sometimes big, sometimes small) that run from within Dreamweaver and provide invaluable, additional functionality that Dreamweaver doesn’t provide standard. The tools within Data Bridge consist of step-by-step wizards and "quick insert" interfaces that make developing key parts of your website a smooth and straight forward process.

Install your extensions

With your computer running everything you need to successfully use WebAssist Dreamweaver extensions and build websites, you can install your Data Bridge extension. WebAssist provides you with a Download Center for downloading all of the extensions you have purchased. You can log into your Download Center at any time to retrieve the extensions you own. Each extensions is delivered as a .mxp file which installs through the Adobe Extension Manager.

Follow this tutorial for steps on how to install a Dreamweaver extension:

  1. Installing WebAssist extensions

arrow downStart using your extensions

In this section, we will discuss a few of the more common applications people use Data Bridge to make and teach you how to go about completing a basic project with your Data Bridge extension.

If you are new to extensions/web development...

If you've never built a website before, or Dreamweaver extensions are new to you, you should get your feet wet by playing with the utilities within Data Bridge to get the hang of how they work. Data Bridge's utilities are simple, and have been designed to be incredibly easy to use.

Here are some of the tools that you might want to take a look to get yourself more comfortable with extensions and web development.

  1. Data Bridge's Button Styler tool is perfect for creating professional CSS buttons for use in your website. These tools originated from a stand-alone extension called CSS Button Styler.
    You can refer to CSS Button Styler's Getting Started Guide for more information on using this tool.
  2. Data Bridge's DataAssist tool is your one stop shop for easily creating working database driven search, results, update, insert, and details pages for your website's data. These tools originated from a stand-alone extension called DataAssist.
    You can refer to DataAssist's Getting Started Guide for more information on using this tool.
  3. Data Bridge's Image Resizer tool is exactly what you need to save your site's bandwidth by automatically, and efficiently resizing all images on your site to the exact size they display as without destroying the originals. These tools originated from a stand-alone extension called Image Resizer.
    You can refer to Image Resizer's Getting Started Guide for more information on using this tool.
  4. Data Bridge's SecurityAssist tool allows you to secure parts of your site from unauthorized visitors, but let the ones you want have whatever level of access you want them to have. These tools originated from a stand-alone extension called SecurityAssist.
    You can refer to SecurityAssist's Getting Started Guide for more information on using this tool.
  5. Data Bridge's Dynamic Web Charts tool is the way to go for adding attractive charts that dynamically populate with data to your site. These tools originated from a stand-alone extension called Dynamic Web Charts.
    You can refer to Dynamic Web Charts's Getting Started Guide for more information on using this tool.
  6. Data Bridge's Validation Tooltips for Spry tool allow you to add validations on your site, making sure only the data you want is submitted to your site. These tools originated from a stand-alone extension called Validation Tooltips for Spry.
    You can refer to the Validation Tooltips for Spry Getting Started Guide for more information on using this tool.



Now you're ready to jump into dynamic development

Now that you are used to using the extensions and working within Dreamweaver, we're going to move on to building dynamic websites. A dynamic website typically means that you are using a database (MySQL) and server language (PHP), in order for aspects of the site to function. Your WebAssist extensions will do the dynamic work for you, but there are certain aspects of dynamic development that you should be familiar with when you enter this level of production.

To ensure success with WebAssist dynamic extensions, make sure you have completed the steps for Setting Up a Testing Server and Defining a site in Dreamweaver.

To make dynamic sites, complete the steps in the Creating a PHP Database Connection in Dreamweaver tutorial.



New to databases?

If databases are new to you, we've got you covered with a free MySQL eCommerce Database that you can download below. Whether you are building an eCommerce website, or just a simple user registration system, this database should have everything you need to get started with a database-driven website.

  1. wa_ecommerce_db.zip
If you previously created a database connection in Dreamweaver, you may need to update that connection information for this new database.



Now that you've got your database set up and ready to go, you can start creating a more dynamic and useful web application using Data Bridge. Here are some examples of what you could build and which tools to use.

Create a simple contact form, and email the contact information

Here you are: world's greatest web design contractor, nice website set up, ready to fight the world, and take all it can give, and… you have no idea how to let clients contact you for a job. Sure you could give them an email address, but on top of being boring, it would be much classier to give them a handy dandy form that they can fill out giving you their information.

You can build a simple system like this using just one single Data Bridge utility; Form Builder. With Form Builder we're going to create the form, and add the email functionality to send the contact information right to your inbox.

  1. Click WebAssist in the menu bar, select Forms, then select Insert New Form
  2. Change the form type to Contact
  3. Now, we don't want all these unneeded fields, so change the form's sub-type from Appointment Request to Simple Contact
    Even with Simple Contact, we still don't need 2 validation questions, so let's remove the security question
  4. Click the edit pencil next to the form sub-type list
  5. Now, click the Label Group: 2 in the list
  6. Click the edit pencil button
  7. Here, you're going to select the Label Answer from the list to select the security question field
  8. Click the Delete (trash can) button to delete the field
  9. Click Finish
  10. Check the Save as preset checkbox, enter the Type as Security - no question, and click Finish
  11. Click the Finish button again
  12. Check the Save as preset checkbox, enter the Preset as Simple Contact - no question, and click Finish
  13. Chose a Design preset
    For this tutorial, we're going to select Compact


    Now it's time to add the emailing functionality to your site
  14. Click the Form Function tab along the top of the window
  15. Check the Send the form contents in an email checkbox to enable email functionally
  16. Click the envelope button
  17. Click the lightning bolt next to the From field
  18. Under the Current Working Form list, select the Email_Address binding
  19. Click the OK button
  20. In the To field, enter your email address
  21. Click the lightning bolt next to the Subject field
  22. Under the Current Working Form list, select the Full_Name binding
    The binding iin this list are the values entered in the form fields.

  23. In the Subject field enter, "Contact Request from " right before the value that was just entered into the field
  24. Next, uncheck the Manage email body from file checkbox
  25. Click the edit pencil above the preview window

    This is where we create the email body

  26. In the text box, type "Name: ", "Email Address: ", and "Comments: " each on a separate line
  27. Place your cursor after "Name: "
  28. Click the tiny lightening bolt next to the Get From File button
  29. Under the Current Working Form list, select the Full_Name binding
  30. Click OK
  31. Place your cursor after "Email Address: "
  32. Click the tiny lightening bolt next to the Get From File button
  33. Under the Current Working Form list, select the Email_Address binding
  34. Click OK
  35. Place your cursor after "Comment: "
  36. Click the tiny lightening bolt next to the Get From File button
  37. Under the Current Working Form list, select the Comments binding
  38. Click OK
  39. Click OK once again
  40. Click Finish
  41. Click Finish one last time
  42. Save your page and preview it in a browser
  43. Marvel at your handiwork

arrow downWhat to do next...

Now that you have created a simple contact page, you're ready to start moving on to more advanced tools within Data Bridge. You could use the Theme It functionality in Form Builder to change the color scheme of your whole contact form. You could use Button Styler to make a majestic custom button and add it to your site and wow your friends. Create a full blown user registration and management section for your site using Form Builder and DataAssist.

The sky is the limit, and with the foundation you just gained, you're ready to tackle it.

arrow downWhat if i need help?

The more you develop websites, the more likely you will run into hurdles or issues that you need a little assistance with. Here at WebAssist we understand this, and want to do everything we can to make sure our extensions save you time and give you abilities that you might not have otherwise.

For this reason, we offer free technical support via our Support Forums. These forums are monitored regularly by WebAssist support staff and also by our brilliant WebAssist Community Experts. Any question you post will be responded to by someone as quickly as possible.

For more information regarding support, and the support options available to you: visit our Support page at http://webassist.com/support.

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

bbgd: 3 Years, 2 Months, 1 Week, 5 Days, 8 Hours, 8 Minutes ago

This tutorial got me to the part to fill out the form. I did and tried to send it and nothing happened. Now what do I do? cobntact tecjh support again and wait a couple of days for help?

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.