Getting Started with Data Bridge

Tutorial created by Ray Borduin, WebAssist

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

4 ratings | Sign in to rate this tutorial | View comments

next section

Requirements

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

next section

What 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

next section

Start 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.

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

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

next section

What 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.

What 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.

Reviews 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.

4 ratings | Sign in to rate this tutorial