|
18 | 18 | <h1 id="spreadsheets-as-databases">Spreadsheets as Databases</h1> |
19 | 19 | <p>Spreadsheets are a great <em>lightweight</em> databases. Google Spreadsheets in particular are easy to work with and share, making this unlike most traditional database setups. That being said, traditional databases are great for bigger, more secure jobs. If you're storing lots and lots and lots of information, or storing sensitive or complex information—the spreadsheet is not for you. But if you're working on small to medium sized personal or community projects, try a spreadsheet!</p> |
20 | 20 | <h2 id="the-short-sweet">The Short & Sweet</h2> |
21 | | -<ol> |
| 21 | +<ul> |
22 | 22 | <li>Link to Sheetsee.js and <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> in your HTML head.</li> |
23 | 23 | <li>Link to sheetsee's default stylesheet, <code>sss.css</code>.</li> |
24 | 24 | <li>Create a place holder <code><div></code>, with <code>id</code>, in your HTML the map or table you want.</li> |
25 | 25 | <li>Create templates for tables in <code><script></code> tags with an <code>id</code> matching the <code><div></code> plus <code>_template</code>.</li> |
26 | | -<li>Inside of another <code><script></code> tag initialize <a href="https://github.com/jsoma/tabletop">Tabletop.js</a>. Once it fetches your spreadsheet data, pass it onto Sheetsee.<pre><code class="lang-JS">document.addEventListener('DOMContentLoaded', function() { |
27 | | -var URL = 'YOURSPREADSHEETSKEYHERE' |
28 | | -Tabletop.init({key: URL, callback: callback, simpleSheet: true}) |
| 26 | +<li>Inside of another <code><script></code> tag initialize <a href="https://github.com/jsoma/tabletop">Tabletop.js</a>. Once it fetches your spreadsheet data, pass it onto Sheetsee.</li> |
| 27 | +</ul> |
| 28 | +<pre><code class="lang-JS">document.addEventListener('DOMContentLoaded', function() { |
| 29 | + var URL = 'YOURSPREADSHEETSKEYHERE' |
| 30 | + Tabletop.init({key: URL, callback: callback, simpleSheet: true}) |
29 | 31 | }) |
30 | 32 | </code></pre> |
31 | | -</li> |
32 | | -<li>Define the function that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.<pre><code class="lang-JS">function callback (data) { |
33 | | -// All the Sheetsee things you want to do! |
| 33 | +<ul> |
| 34 | +<li>Define the function that <a href="https://github.com/jsoma/tabletop">Tabletop.js</a> calls when it returns with the data. This function will contain all the Sheetsee.js methods you want to use.</li> |
| 35 | +</ul> |
| 36 | +<pre><code class="lang-JS">function callback (data) { |
| 37 | + // All the Sheetsee things you want to do! |
34 | 38 | } |
35 | 39 | </code></pre> |
36 | | -</li> |
| 40 | +<ul> |
37 | 41 | <li>Set it and forget. Now all you need to do is edit the spreadsheet and visitors will get the latest information every time they load the page.</li> |
38 | | -</ol> |
| 42 | +</ul> |
39 | 43 | <h2 id="bare-minimum-setup">Bare Minimum Setup</h2> |
40 | 44 | <p>Ignoring some HTML things to conserve space, you get the point. This is a basic setup:</p> |
41 | 45 | <pre><code class="lang-HTML"><html> |
|
0 commit comments