2011년 11월 10일 목요일

HTML5 Example - Web SQL.

 Here is an HTML5 Web SQL example. This is from www.html5rocks.com.


<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: #222;
        font: 14px Arial;
      }
      
      body a {
        color: #3D5C9D;
        text-decoration: none;
      }
    </style>
    <script>
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
      html5rocks.webdb.open = function() {
        var dbSize = 5 * 1024 * 1024; // 5MB
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo manager", dbSize);
      }
      
      html5rocks.webdb.createTable = function() {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS todo(ID INTEGER PRIMARY KEY ASC, todo TEXT, added_on DATETIME)", []);
        });
      }
      
      html5rocks.webdb.addTodo = function(todoText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var addedOn = new Date();
          tx.executeSql("INSERT INTO todo(todo, added_on) VALUES (?,?)",
              [todoText, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM todo", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      html5rocks.webdb.deleteTodo = function(id) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          tx.executeSql("DELETE FROM todo WHERE ID=?", [id],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
          });
      }
      
      function loadTodoItems(tx, rs) {
        var rowOutput = "";
        var todoItems = document.getElementById("todoItems");
        for (var i=0; i < rs.rows.length; i++) {
          rowOutput += renderTodo(rs.rows.item(i));
        }
      
        todoItems.innerHTML = rowOutput;
      }
      
      function renderTodo(row) {
        return "<li>" + row.todo  + " [<a href='javascript:void(0);'  onclick='html5rocks.webdb.deleteTodo(" + row.ID +");'>Delete</a>]</li>";
      }
      
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.createTable();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }
      
      function addTodo() {
        var todo = document.getElementById("todo");
        html5rocks.webdb.addTodo(todo.value);
        todo.value = "";
      }
    </script>
  </head>
  <body onload="init();">
    <ul id="todoItems">
    </ul>
    <form type="post" onsubmit="addTodo(); return false;">
      <input type="text" id="todo" name="todo" placeholder="What do you need to do?" style="width: 200px;" />
      <input type="submit" value="Add Todo Item"/>
    </form>
  </body>
</html>


 Type this code and save it html5_websql.html. Open this file at your browser, I recommend Google chrome or Firefox not IE to test.


 Add some todos in test page, and close your browser and reopen this example. Your previous input will be alived.


2011년 11월 6일 일요일

How to Detect Mobile Browser

If users access your web system through mobile browser, you might like to redirect the access of them.

Follow this link, and download script file.

http://detectmobilebrowsers.com/