Translate

Wednesday, June 22, 2011

How to use web database feature of HTML5? HTML5 + Web Database + Java Script + Android + Chrome

I have created a HTML5 sample which demonstrates how to use web database.

In following sample, jquery and jsapi are being downloaded from internet on the fly at run-time. So make sure you have internet connection when you test the sample. Otherwise, you can download both jquery and jsapi from source and copy them in some local folder then load jquery and jsapi scripts from local folder.

HTML5 web database sample is as follows:
<!DOCTYPE html>
<html> 
  <head>
    <title>Offline Contacts Store using HTML5 Web Database</title>
    <script src="http://www.google.com/jsapi"></script>
    <script>
      google.load("jquery", "1.4.1");
    </script>
    <script>
      var db = window.openDatabase("contacts", "", "contacts", 1024*1024);
     
      if (db == null) alert ("Database not found DB: " + db);

      function insertRecord(number, name, email) {
       db.transaction(function(tx) {
          tx.executeSql('INSERT INTO contacts (number, name, email) VALUES (?, ?, ?)', [number, name, email]);
       });
      }
     
      function renderResults(tx, rs) {
        e = $('#search_results');
        e.html("");
        for(var i=0; i < rs.rows.length; i++) {
          r = rs.rows.item(i);
          e.html(e.html() + ' number: ' + r['number'] + ', name: ' + r['name'] + ', email: ' + r['email'] + '<br />');
        }
      }

      function renderContacts(name) {
        db.transaction(function(tx) {
          if (!(name === undefined)) {
            tx.executeSql('SELECT * FROM contacts WHERE name = ?', [name], renderResults);
          } else {
            tx.executeSql('SELECT * FROM contacts', [], renderResults);
          }
        });
      }

      $(document).ready(function() {
        db.transaction(function(tx) {
          tx.executeSql('CREATE TABLE IF NOT EXISTS contacts(number INTEGER PRIMARY KEY, name TEXT, email TEXT)', []);
        });

        $('#contacts_form').submit(function() {
            insertRecord($('#number').val(), $('#name').val(), $('#email').val());
      
          renderContacts();
          return false;
        });

        $('#filter_results_form').submit(function() {
          e = $('#filter_by_name').val();
          renderContacts(e);
          return false;
        });

        renderContacts();
      });
    </script>
  </head>
  <body>
  <h2>Contact Details</h2>
    <form method="get" id="contacts_form">
      <ul>
      <li>
        <label for="1">Contact Number</label>
        <input type="text" id="number" name="number" size="30"  />
      </li>
      <li>
        <label for="2">Name</label>
        <input type="text" id="name" name="name" size="30" placeholder="Enter Name" size="30" />
      </li>
      <li>
        <label for="3">email</label>
        <input type="email" id="email" name="email" placeholder="Enter your email address" size="30"/>
      </li>
      <div>
        <input type="submit" value="Insert Contact" />
      </div>
      </ul>
    </form>
    <div>
      <h2>Search Results</h2>
      <form id="filter_results_form">
        <input type="Name" placeholder="Filter by name" size="30" id="filter_by_name" />
        <input type="submit" value="Search Contact" />
      </form>
    </div>
    <div id="search_results">

    </div>
  </body>
</html>

Sample creates database if not available. Creates table if not already created and performs INSERT and SELECT queries on the table. Soon I will update sample with UPDATE and DELETE query samples too. UI does not look good but it does the job.

Most Android browsers support web database. I tested above sample on Android 2.3.3. To test sample on Android, deploy above sample in some web server and hit the page from your Android browser or WebView sample I have posted in previous blog: http://rashidnoorani.blogspot.com/2011/06/how-to-run-html-5-app-from-android.html

Note:
I tested above HTML5 sample in Chrome 12.0.742.100 version. Web database is not supported in Firefox 5. Sample gives "window.openDatabase is not a function" error in FireFox 5.

1 comment:

  1. Hi,

    I tried out the code above but i am experiencing an error "webstorage cannot be resolved to a type".

    please help.

    ReplyDelete