Powered by GoodBarry

“Ninja Training for Web Designers”

How to Build an Online Business with Triangle, the Adobe Dreamweaver Extension

by Larz 18-Apr-2008

Online Businesses are like websites with brains. Websites that help you run a business, make more money, service your customers and sell your products. They make your life a little easier, and running a business a little smoother.

- GoodBarry

I'm a designer, I don't want to code, I want to design and that's why I'm a designer; I'm sure the same goes for you as well. What do you do if your clients want something more for their website, e.g. a customer database. If you're able to provide what they want, how long does it usually take for you to create a custom web form for the customer database. And how long does it take to create a custom mini database application to store and search sets of related "items" e.g. a job listing. In this tutorial I'll show you the best way to "inject" these functionalities into your website, without typing a single line of code.

I know what you're thinking, you're thinking "ohmigaw this thing is going to make me more POWERFUL! Show me the way plskthnx!!1". Ladies and gentlemen, without further ado, let the tutorial commence.

What is Triangle

Triangle is an Adobe Dreamweaver extension developed by GoodBarry that lets you inject online business functionalities into your HTML, helping you build online businesses, not websites. This will turn you into a superhero like Flash. Flash is very fast, hence the name.


Why use Triangle

  1. No more coding. It lets you build functionalities with a few clicks so you can concentrate on making the design ASAP™ (as sexy as possible).
  2. It lets you harness the awesome power of GoodBarry (read more about GoodBarry).
  3. It lets you build online businesses faster than anyone else and entirely in Dreamweaver.

What you need

  1. Dreamweaver 8 (Windows), Dreamweaver CS3 and CS4 (Windows and OSX)
  2. GoodBarry account (30-day Free Trial)
  3. Triangle

Creating Webpages and Templates

  1. Getting a GoodBarry account

    1. Go to http://goodbarry.com/signup/obb.aspx?SPID=150.
    2. Choose Start from scratch then click Finish.

      Screenshot of GoodBarry Signup page
    3. Fill in your details and then submit.
    4. Check your email; the email from GoodBarry contains details such as site URL, username and password and ftp URL.
  2. Adding Triangle extension to Dreamweaver

    Double click on the icon and the extension will install itself.

  3. Creating a new webpage

    1. Open Dreamweaver, click on Window (next to Help) and you should be able to find Triangle at the bottom of the dropdown menu. Click on Triangle.

      Screenshot of Dreamweaver

      (I like to look at Earth from space as it reminds me of my childhood on a spaceship. Actually I can't really remember any of it; my brain is such an unrealiable bastard.)

    2. Enter your login details (from your GoodBarry email) and click Login.

      Screenshot of Triangle panel in Dreamweaver
    3. Choose your newly created GoodBarry website from the website list and click Load.
    4. Click the Web Pages tab.

      Screenshot of Triangle, Web Pages tab
    5. Click New.
    6. In the document window type "The Page of Awesome".
    7. In the Triangle panel select the folder you want the new webpage to be in. ( "/" means root folder)
    8. We'll call our page "awesome" without the .html because we're quite awesome. Enter "awesome" in Page URL and Page Name.

      Explanation

      Page URL is what shows up in the URL i.e. what people type to go to that page; it's like an alias. Page Name is the real name (file name) of the actual webpage, so your webpage is like a ninja, nobody knows its real name unless you give them FTP access to your website.

      For example a webpage with "home" as Page URL would have a URL of http://yourwebsite.com/home and not http://yourwebsite.com/Home-Page.html which is the Page Name.

    9. Choose Don't use a template because we don't have a template yet.
    10. Tick Start page if you want this page to be the start page of your website.
    11. If you want to save the work-in-progress page without publishing it, click Save; the page will be saved in the database and you won't be able to see it on FTP. We want to publish our page so let's click Save and Publish.

      Note

      Pages that aren't published have (new) right next to them. (Check out the previous screenshot.)

    12. To preview the webpage click Preview

      A Big Fat Warning

      The content of the selected/active document window will be saved when you click Save or Save and Publish. So watch out when you have lots of document windows opened. Make sure Current Webpage in the Triangle Panel matches the selected/active document window.

  4. Loading a webpage to edit

    1. Click on the webpage you'd like to edit.
    2. Click the Load Live button to load a published webpage. Click Load Working to load an unpublished webpage.
  5. Rolling back a webpage

    All versions of the webpage is archived and kept in the database. To rollback a webpage after a boo-boo simply click on archive and select the version you want to rollback. It's what Brett calls "Teh time machine of teh internetz'.

  6. Removing a webpage

    Simply delete the webpage via FTP or load the webpage, check Deleted and then click Save and Publish.

  7. Creating a new template

    Explanation

    A template is a preset look and feel for a webpage, used so that the look and feel doesn't have to be recreated each time the webpage is created.

    Template diagram
    Screenshot of Triangle Template list

    Templates work the same way as Webpages. To make a template a default template, simply check the Default checkbox.

    Note

    All templates must have {tag_pagecontent} tag; place {tag_pagecontent} where you want the webpage content to sit on the template.


Injecting functionalities into HTML

These are the modules you can insert into your webpages, hence making your website more powerful, transmuting it into an Online Business:

  • Ad Rotator
  • Affiliate Program Stats
  • Announcements
  • Blogs
  • Bookings
  • Newsletter Subscription Form
  • Online Shop
  • Comments
  • Content Holders
  • Dynamic Menus
  • FAQs
  • Forums
  • Literature
  • Photo Gallery
  • RSS Channels
  • Secure Zones
  • Search
  • Web Apps (read more)
  • Web Forms

Note

To add or remove module items you'll have to use a browser and log into the GoodBarry web-based admin.

Example: Adding Web Form onto a Webpage

“Web Forms allow you to interact with your customers, providing them with a communication channel to your business. You can use web forms to run competitions, create surveys, collect bookings, field enquiries, collect donations or register for access to specials. The possibilities are almost unlimited, and the best thing is that the customers details will always be seamlessly captured into your contact database and a case created for each web form submission.”

Let's create an awesome Web Form

  1. Log into your GoodBarry web-based admin.

    Screenshot of GoodBarry login
  2. Hover the cursor over Module tab then click Web Forms.

    Screenshot of GoodBarry dashboard
  3. Click Create a new Web Form.
  4. Enter Web Form Name then click Next.
  5. Select the system fields to add to the Web Form, this is pretty straight forward.
  6. Add custom fields to the Web Form by entering Field Name, selecting Field Type and clicking the Save Field button. (I can see you're excited because now you can add as many custom fields as you want like some super-advanced robot, but 100+ fields can make the users want to shoot themselves in the mouths.)
  7. Click Next to set up the Auto Responder, click Save when you're done and you can send a test mail to yourself by clicking Email Me. You've just created your own customized Web Form. *High five* very nice.
  8. Switch back to Triangle and load a webpage where you want your Web Form to reside.
  9. Click on the Modules tab. Scroll down to Web Forms, open the Web Forms folder, select Web Forms and click the Load button.

    Screenshot of Modules tab
  10. You should be able to see the name of your customized Web Form on the list. Select it and click the >> button.
  11. Click >> again.
  12. The Web Form is now ready for insertion. Make sure the cursor is placed where you want to code to be inserted in HTML and click Insert.
  13. BAM! Click the Web Pages tab and then click Save and Publish. You win.

Customizing Modules, Outbound Emails and System Messages

To show the Customizationn list, click on the Stealthy Tab™ to the right of Modules tab. You can also edit the existing CSS or javascript files by clicking Special Files.

Screenshot of Triangle Customization List

Yup that's it! Adding business functionality to your website is that easy. Have a play with GoodBarry, especially the Web Apps module that makes people go "phwoar".

Back to Top