website integration with quickbase - joshua mcginnis
DESCRIPTION
Go beyond the native QuickBase user interface and extend your company's capabilities by integrating QuickBase with your website. Not only can you collect information via a web form that dumps data right into QuickBase on the back end, you can use QuickBase to manage and publish content to your website.TRANSCRIPT
![Page 1: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/1.jpg)
Intuit Proprietary & Confidential
people
Website Integration with QuickBaseCollecting and Displaying QuickBase Data On Your Website
October 28, 2009
Joshua McGinnis - @joshuamc #techfest
![Page 2: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/2.jpg)
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
![Page 3: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/3.jpg)
Intuit Proprietary & Confidential
How it works:
3
QuickBaseWebsite
Forms, Reports,Google Maps, etc.
HTTP (GET or POST)
XML / CSV/ HTML
![Page 4: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/4.jpg)
Intuit Proprietary & Confidential
Website Integration Examples
4
http://quickbase.intuit.com
~3 Million Pageviews/Month
Small Marketing Team
Single Web Developer (Me)
![Page 5: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/5.jpg)
Intuit Proprietary & Confidential
Website Integration Examples
5
![Page 6: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/6.jpg)
Intuit Proprietary & Confidential6
Let’s get started!
![Page 7: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/7.jpg)
Intuit Proprietary & Confidential
So how do you go from …
7
A form inside of QuickBase
![Page 8: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/8.jpg)
Intuit Proprietary & Confidential
To a form on your site?
8
A form inside of QuickBase
A form on your website?
![Page 9: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/9.jpg)
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
![Page 10: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/10.jpg)
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
![Page 11: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/11.jpg)
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
![Page 12: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/12.jpg)
Intuit Proprietary & Confidential
Recorded Added!
12
![Page 13: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/13.jpg)
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
![Page 14: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/14.jpg)
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:
![Page 15: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/15.jpg)
Intuit Proprietary & Confidential
Building a Google Maps Mashup
15
This point could come from your contact
tables in your QuickBase.
![Page 16: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/16.jpg)
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
![Page 17: Website Integration with QuickBase - Joshua McGinnis](https://reader035.vdocuments.net/reader035/viewer/2022062319/554eb3bcb4c9055f7b8b533b/html5/thumbnails/17.jpg)
Intuit Proprietary & Confidential
Plotting the Point
17