Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Integration with QuickBase - Joshua McGinnis

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.

  • Be the first to comment

Website Integration with QuickBase - Joshua McGinnis

  1. 1. Website Integration with QuickBase Collecting and Displaying QuickBase Data On Your Website October 28, 2009 Joshua McGinnis - @joshuamc #techfest
  2. 2. Why do web integration? <ul><li>Collect data directly from your customers </li></ul><ul><ul><li>Web forms, conversion & order tracking </li></ul></ul><ul><ul><li>No more manual entry </li></ul></ul><ul><ul><li>Saves time and $$$ </li></ul></ul><ul><li>Keep the customer updated … in real time! </li></ul><ul><ul><li>Stream data right out of QB to your website </li></ul></ul><ul><ul><li>Mashups, tables, reporting, etc … </li></ul></ul><ul><li>Enable team collaboration </li></ul><ul><ul><li>Designated members can publish/edit content </li></ul></ul>
  3. 3. How it works: QuickBase Website Forms, Reports, Google Maps, etc. HTTP (GET or POST) XML / CSV/ HTML
  4. 4. Website Integration Examples ~3 Million Pageviews/Month Small Marketing Team Single Web Developer (Me)
  5. 5. Website Integration Examples
  6. 6. Let’s get started!
  7. 7. So how do you go from … A form inside of QuickBase
  8. 8. To a form on your site? A form inside of QuickBase A form on your website?
  9. 9. Building the form <ul><li>Configure QuickBase </li></ul><ul><ul><li>Allow non-SSL access via API (Customize->App->Settings) </li></ul></ul><ul><ul><li>Allow “Everyone on the internet” to add records (Share->Manage Users) </li></ul></ul><ul><li>Build the form </li></ul><ul><ul><li>You can use QuickBase Form Creation Wizard </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul><ul><ul><li>Or code it by hand … it’s pretty easy! </li></ul></ul>
  10. 10. Anatomy of a Form <ul><li>Form Elements </li></ul><ul><ul><li>Action </li></ul></ul><ul><ul><ul><li> {table_id} ?act=API_AddRecord </li></ul></ul></ul><ul><ul><ul><li>method=“post” </li></ul></ul></ul><ul><ul><li>Field IDs </li></ul></ul><ul><ul><ul><li>Name </li></ul></ul></ul><ul><ul><ul><ul><li>_fid_6 </li></ul></ul></ul></ul><ul><ul><ul><li>Address </li></ul></ul></ul><ul><ul><ul><ul><li>_ fid_7 </li></ul></ul></ul></ul><ul><ul><ul><li>State </li></ul></ul></ul><ul><ul><ul><ul><li>_fid_8 </li></ul></ul></ul></ul><ul><ul><ul><li>Zip </li></ul></ul></ul><ul><ul><ul><ul><li>_fid_9 </li></ul></ul></ul></ul>
  11. 11. Complete Example <form action=&quot; {table_id} ?act=API_AddRecord&quot; method=&quot;post&quot;> <div><input name=&quot; rdr &quot; value=“thank_you.html&quot; type=&quot;hidden&quot; /></div> <div><p>Name:</p><input type=&quot;text&quot; name=&quot;_fid_6&quot; /></div> <div><p>Address:</p><input type=&quot;text&quot; name=&quot;_fid_7&quot; /></div> <div><p>State:</p><input type=&quot;text&quot; name=&quot;_fid_8&quot; /></div> <div><p>Zip:</p><input type=&quot;text&quot; name=&quot;_fid_9&quot; /></div> <div><input type=&quot;submit&quot; value=&quot;submit&quot; /></div> </form> <ul><li>Form “action=“ needs {table_id} of qb table being populated </li></ul><ul><li>rdr used for redirecting users to a “Thank You” page </li></ul><ul><li>Input name must be in _fid_# format where fid == QuickBase field id </li></ul>
  12. 12. Recorded Added!
  13. 13. Displaying records on your site <ul><li>Prepare Your QuickBase </li></ul><ul><ul><li>Create a view-only user that can view only the records you want to display </li></ul></ul><ul><li>Choose an SDK </li></ul><ul><ul><li>Client-based: javascript </li></ul></ul><ul><ul><li>Server-side: Ruby, VB, Perl, C#, Java, and … PHP! </li></ul></ul><ul><li>Download PHP SDK from: </li></ul><ul><ul><li> </li></ul></ul>
  14. 14. 3 Line Example in PHP <ul><li><?php </li></ul><ul><li>include ( 'quickbase.php' ); </li></ul><ul><li>$ quickbase = new QuickBase( '' , '' , true , 'bet8hs7za' ); </li></ul><ul><li>echo $ quickbase ->gen_results_table( '' , '1' ); </li></ul><ul><li>?> </li></ul>Returns:
  15. 15. Building a Google Maps Mashup This point could come from your contact tables in your QuickBase.
  16. 16. Steps <ul><li>Get a Google Maps key </li></ul><ul><ul><li> </li></ul></ul><ul><li>Include the JS in the head of your document </li></ul><ul><ul><li>< script src=&quot; {Your Maps Key}&quot; type=&quot; text/javascript &quot;>< /script > </li></ul></ul><ul><li>Geo-Encode Addresses from QuickBase </li></ul><ul><ul><li> 100 5 th Ave. Waltham, MA &key= {Your Maps Key} </li></ul></ul><ul><ul><li>100 5 th Ave. Waltham, MA -> 200,8,42.3945554,-71.2561370 </li></ul></ul><ul><ul><li>Do it on the fly or in a cronjob </li></ul></ul><ul><li>Plot the point! </li></ul>
  17. 17. Plotting the Point