website integration with quickbase - joshua mcginnis

Intuit Proprietary & Confidential

people

Website Integration with QuickBaseCollecting and Displaying QuickBase Data On Your Website

October 28, 2009

Joshua McGinnis - @joshuamc #techfest

Intuit Proprietary & Confidential

Why do web integration?

• Collect data directly from your customers–Web forms, conversion & order tracking– No more manual entry– Saves time and $$$

• Keep the customer updated … in real time!– Stream data right out of QB to your website–Mashups, tables, reporting, etc …

• Enable team collaboration– Designated members can publish/edit content

2

Intuit Proprietary & Confidential

How it works:

3

QuickBaseWebsite

Forms, Reports,Google Maps, etc.

HTTP (GET or POST)

XML / CSV/ HTML

Intuit Proprietary & Confidential

Website Integration Examples

4

http://quickbase.intuit.com

~3 Million Pageviews/Month

Small Marketing Team

Single Web Developer (Me)

Intuit Proprietary & Confidential

Website Integration Examples

5

Intuit Proprietary & Confidential6

Let’s get started!

Intuit Proprietary & Confidential

So how do you go from …

7

A form inside of QuickBase

Intuit Proprietary & Confidential

To a form on your site?

8

A form inside of QuickBase

A form on your website?

Intuit Proprietary & Confidential

Building the form

• Configure QuickBase– Allow non-SSL access via API (Customize->App->Settings)– Allow “Everyone on the internet” to add records (Share->Manage

Users)

• Build the form– You can use QuickBase Form Creation Wizard• https://www.quickbase.com/db/6mztyxu8?act=DBPage&pagename=formWizard.html

–Or code it by hand … it’s pretty easy!

9

Intuit Proprietary & Confidential

Anatomy of a Form

10

• Form Elements• Action

• https://www.quickbase.com/db/{table_id}?act=API_AddRecord• method=“post”

• Field IDs– Name– _fid_6

– Address– _ fid_7

– State– _fid_8

– Zip– _fid_9

Intuit Proprietary & Confidential

Complete Example

11

<form action="https://www.quickbase.com/db/{table_id}?act=API_AddRecord" method="post">

<div><input name="rdr" value=“thank_you.html" type="hidden" /></div>

<div><p>Name:</p><input type="text" name="_fid_6" /></div>

<div><p>Address:</p><input type="text" name="_fid_7" /></div>

<div><p>State:</p><input type="text" name="_fid_8" /></div>

<div><p>Zip:</p><input type="text" name="_fid_9" /></div>

<div><input type="submit" value="submit" /></div>

</form>

• Form “action=“ needs {table_id} of qb table being populated

• rdr used for redirecting users to a “Thank You” page

• Input name must be in _fid_# format where fid == QuickBase field id

Intuit Proprietary & Confidential

Recorded Added!

12

Intuit Proprietary & Confidential

Displaying records on your site

• Prepare Your QuickBase– Create a view-only user that can view only the records you want to

display

• Choose an SDK @code.intuit.com– Client-based: javascript– Server-side: Ruby, VB, Perl, C#, Java, and … PHP!

Download PHP SDK from:– https://code.intuit.com/sf/sfmain/do/viewProject/projects.qb_php_sdk

13

Intuit Proprietary & Confidential

3 Line Example in PHP

<?php include('quickbase.php');

$quickbase = new QuickBase('','', true, 'bet8hs7za'); echo $quickbase->gen_results_table('','1');?>

14

Returns:

Intuit Proprietary & Confidential

Building a Google Maps Mashup

15

This point could come from your contact

tables in your QuickBase.

Intuit Proprietary & Confidential

Steps

• Get a Google Maps key– http://code.google.com/apis/maps/signup.html

• Include the JS in the head of your document– <script src="http://www.google.com/jsapi?key={Your Maps Key}" type="text/javascript"></script>

• Geo-Encode Addresses from QuickBase– http://maps.google.com/maps/geo?output=csv&q=100 5th Ave.

Waltham, MA&key={Your Maps Key}– 100 5th Ave. Waltham, MA -> 200,8,42.3945554,-71.2561370– Do it on the fly or in a cronjob

• Plot the point!

16

Intuit Proprietary & Confidential

Plotting the Point

17