<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>The Why and The How &#187; Ajax</title> <atom:link href="http://www.thewhyandthehow.com/category/ajax/feed/" rel="self" type="application/rss+xml" /><link>http://www.thewhyandthehow.com</link> <description>Just another WordPress weblog</description> <lastBuildDate>Fri, 09 Jul 2010 02:32:51 +0000</lastBuildDate> <generator>http://wordpress.org/?v=2.8.4</generator> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <item><title>Using Google docs as a data store</title><link>http://www.thewhyandthehow.com/using-google-docs-as-a-data-store/</link> <comments>http://www.thewhyandthehow.com/using-google-docs-as-a-data-store/#comments</comments> <pubDate>Wed, 06 May 2009 21:20:00 +0000</pubDate> <dc:creator>Blake Schwendiman</dc:creator> <category><![CDATA[Ajax]]></category> <category><![CDATA[Javascript]]></category> <category><![CDATA[Tutorial]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[google docs]]></category><guid
isPermaLink="false">http://www.thewhyandthehow.com/?p=615</guid> <description><![CDATA[Have you ever wished you had a web-accessible data store for a project but you either can&#8217;t or prefer not to create a database? Recently while developing a Google gadget, I ran into just that scenario. The gadget needs to display some mostly read only data. By mostly, I mean that the data needs to [...]]]></description> <content:encoded><![CDATA[<p>Have you ever wished you had a web-accessible data store for a project but you either can&#8217;t or prefer not to create a database? Recently while developing a Google gadget, I ran into just that scenario. The gadget needs to display some <em>mostly</em> read only data. By mostly, I mean that the data needs to be editable, but the primary function of the gadget is display.</p><p>I really didn&#8217;t want to set up a special server for the data and build a database and the connector PHP for retrieving the data via Ajax because that&#8217;s a lot of work. The great news is that Google provides a direct solution via <a
href="http://docs.google.com/">Google docs</a>.</p><p><a
href="http://www.thewhyandthehow.com/wp-content/uploads/2009/05/google-docs-spreadsheet-sample.png"><img
src="http://www.thewhyandthehow.com/wp-content/uploads/2009/05/google-docs-spreadsheet-sample-150x150.png" alt="google-docs-spreadsheet-sample" title="google-docs-spreadsheet-sample" width="150" height="150" class="left frame size-thumbnail wp-image-668" /></a>To start, I simply created a new spreadsheet and entered the data. Next, using the <strong>share</strong> button, I selected <strong>publish as web page</strong>. Finally, to get the data in a format that I can easily consume using Javascript, I clicked the <strong>more publishing options</strong> link on the publish page to generate the URL to download a CSV version of the spreadsheet.</p><p><a
href="http://www.thewhyandthehow.com/wp-content/uploads/2009/05/google-docs-publish-options.png"><img
src="http://www.thewhyandthehow.com/wp-content/uploads/2009/05/google-docs-publish-options-150x150.png" alt="google-docs-publish-options" title="google-docs-publish-options" width="150" height="150" class="right frame size-thumbnail wp-image-670" /></a>Within minutes, I had created a Javascript-accessible data store that it easy to update, shareable and hosted via Google. To access the data in the spreadsheet, I now use the URL provided by the sharing dialogs, <a
href="http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&#038;output=csv&#038;gid=0">http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&#038;output=csv&#038;gid=0</a>.</p><p>Now with just a little bit of jQuery, I can easily access the data in the spreadsheet and use it however I like. For example:</p><div
id="wp_codebox_msgheader"><span
class="right"><a
href="javascript:;" onclick="toggle_collapse('p6152');">[<span
id="p6152_symbol">-</span>]</a><sup><a
href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span
style="color: #99cc00">?</span></a></sup></span><span
class="left"><a
href="javascript:;" onclick="javascript:showCodeTxt('p615code2'); return false;">View Code</a> JAVASCRIPT</span><div
class="codebox_clear"></div></div><div
id="wp_codebox"><table
width="100%" ><tr
id="p6152"><td
class="code" id="p615code2"><pre class="javascript"><span style="color: #339933;">&lt;</span>script type<span style="color: #339933;">=</span><span style="color: #3366CC;">&quot;text/javascript&quot;</span><span style="color: #339933;">&gt;</span>
  jQuery<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #006600;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    jQuery.<span style="color: #006600;">post</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">'proxy.php'</span><span style="color: #339933;">,</span> 
                    <span style="color: #009900;">&#123;</span>uri<span style="color: #339933;">:</span> <span style="color: #3366CC;">'http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&amp;output=csv&amp;gid=0'</span><span style="color: #009900;">&#125;</span><span style="color: #339933;">,</span> 
                    <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>resp<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
                      do_somthing_with<span style="color: #009900;">&#40;</span>resp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                    <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #339933;">&lt;/</span>script<span style="color: #339933;">&gt;</span></pre></td></tr></table></div><p>Obviously, the <strong>do_somthing_with</strong> function above would be able to do anything with the result data. Also, notice that I&#8217;m using a content proxy (example only) to retrieve the data. For more details about that, read my post about <a
href="http://www.thewhyandthehow.com/building-an-ajax-content-proxy-in-php/">building a simple content proxy in PHP</a>. Below I have written a simple example that retrieves the data and displays it in the following container. The code for the example is identical to the above with the exception of displaying the results.</p><pre id="sample_docs_data" style="margin: 0 12px 0 12px;"></pre><p><script type="text/javascript">/*<![CDATA[*/jQuery(document).ready(function(){jQuery.post('/wp-content/themes/thesis/custom/ajax/proxy.php',{uri:'http://spreadsheets.google.com/pub?key=rocYeX7smxw1E2FFdhwsiiQ&#038;output=csv&#038;gid=0'},function(resp){jQuery('#sample_docs_data').html(resp);});});/*]]>*/</script></p><p>As you can see, using Google documents as a data store can be a valuable addition to your web site implementation. The advantages include easy, sharable access to updating the data, always-on access to the data, and multiple formats for retrieving the data. Several features supported by Google docs publishing such as filtering and querying data and retrieving JSON results have not be covered here.</p> ]]></content:encoded> <wfw:commentRss>http://www.thewhyandthehow.com/using-google-docs-as-a-data-store/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss><!--
This site's performance optimized by W3 Total Cache:

W3 Total Cache improves the user experience of your blog by caching
frequent operations, reducing the weight of various files and providing
transparent content delivery network integration.

Learn more about our WordPress Plugins: http://www.w3-edge.com/wordpress-plugins/

Minified using memcached
Page Caching using memcached
Database Caching 8/15 queries in 0.008 seconds using memcached

Served from: a2.c0.354a.static.theplanet.com @ 2010-09-10 03:18:17 -->