CRUD off-line examples

Theses examples try to show how to build a CRUD persisting data off-line in the web browser using diferent kind of technologies.

• Example 1 - HTML5 + SQLite
• Example 2 - HTML5 + JQuery Mobile + SQLite
• Example 3 - HTML5 + JQuery Mobile + Backbone.js

---

Example 1 - HTML5 + SQLite

This example show how to persist local data using HTML5 + SQLite3.

Technologies

I used:

• HTML5
• Javascript
• Twitter Bootstrat 2.2.2
• JQuery 1.8.3

Notes:

For this example, you must use <button type="button"> because this type will prevent the page to be reloaded.

References:

• http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html
• http://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/SafariJSDatabaseGuide.pdf
• http://tejasrpatel.wordpress.com/2011/12/29/create-sqlite-off-line-database-and-insertupdatedeletedrop-operations-in-sqlite-using-jquery-html5-inputs/
• http://www.aquim.com/web-article-237.html
• http://blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/
• http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH22.php
• http://www.html5rocks.com/pt/tutorials/appcache/beginner/

Top

---

Example 2 - HTML5 + JQuery Mobile + SQLite

This example show how to persist local data using HTML5 + SQLite3.

Technologies

I used:

• HTML5
• SQLite3
• JQuery 1.8.3
• JQuery Mobile 1.2.0

Notes:

For this example, you must use <button type="button"> because this type will prevent the page to be reloaded.

References:

• http://www.jquerymobile.com.br
• http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html
• http://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/SafariJSDatabaseGuide.pdf
• http://tejasrpatel.wordpress.com/2011/12/29/create-sqlite-off-line-database-and-insertupdatedeletedrop-operations-in-sqlite-using-jquery-html5-inputs/
• http://www.aquim.com/web-article-237.html
• http://blog.vilourenco.com.br/como-criar-sqlite-offline-em-dispositivos-moveis-com-html5/
• http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH22.php
• http://www.html5rocks.com/pt/tutorials/appcache/beginner/

Top

---

Example 3 - HTML5 + JQuery Mobile + Backbone.js

This example show how to persist local data using Backbone.js

Technologies

I used:

• HTML5
• JQuery 1.8.3
• JQuery Mobile 1.2.0
• Backbone.js 0.9.9

Notes:

For this example, you must use <button type="button"> because this type will prevent the page to be reloaded.

References:

• http://www.jquerymobile.com.br
• http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/UsingtheJavascriptDatabase/UsingtheJavascriptDatabase.html
• http://developer.apple.com/library/safari/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/SafariJSDatabaseGuide.pdf
• http://the-jquerymobile-tutorial.org/jquery-mobile-tutorial-CH22.php
• http://backbonejs.org/
• http://adrianmejia.com/blog/2012/09/11/backbone-dot-js-for-absolute-beginners-getting-started/

Top