Make Listing Site using HTML 5 Storage Feature

emoisback · 2012-07-13, 02:53 AM

Now i'll share the source code to make a listing site..
just for make a simple list, i make it because i'll use this stuff to listing my useful thread or posting from PGC..
like what i'have to do at my signature, but when i have make a lot of tutorial it will be distrubing other member..
so i decide to make a HTML site to listing what i have done at PGC, and put the link at my signature..

Oke this is the Index to view the HTML 5 Storage

PHP Code:


<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        color: #222;
        font: 14px Arial;
      }

      body a {
        color: #3D5C9D;
        text-decoration: none;
      }
    </style>
    <script>
     // here is to declare html webdb valriable
      var html5rocks = {};
      html5rocks.webdb = {};
      html5rocks.webdb.db = null;
      
     // fuction will be execute when we open webd
      html5rocks.webdb.open = function() {
        var dbSize = 5 * 1024 * 1024; // 5MB // allocated size for our storage
        html5rocks.webdb.db = openDatabase("Todo", "1.0", "Todo PGC Post", dbSize); // to open DB function
      }

      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      
      // when success open storage
      html5rocks.webdb.onSuccess = function(tx, r) {
        // re-render the data.
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }

      //function to get data from storage
      html5rocks.webdb.getAllTodoItems = function(renderFunc) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx) {
          tx.executeSql("SELECT * FROM todo", [], renderFunc,
              html5rocks.webdb.onError);
        });
      }
      
      //to put item from database into HTML body
      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;
      }

      // to make a html code 
      function renderTodo(row) {
        return "<li><a href='"+row.links+"'>" + row.todo  + "- [BY" + row.title + "]</a></li>";
      }
      
     // function to open and render all data into html we will call it at the first page load
      function init() {
        html5rocks.webdb.open();
        html5rocks.webdb.getAllTodoItems(loadTodoItems);
      }

    </script>
  </head>
  <body onload="init();">
    <ul id="todoItems">
    </ul>
  </body>
</html>

Oke this is the Panel to Add/Delete list into HTML 5 Storage

many function have a same desc but have a additional function like create DB, Delete, and Insert..

PHP Code:


<!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);
      }
       
      //will be used to create storage table when table is doesnt exists (you can learn about SQL Query for expert on this)
      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, title TEXT, todo TEXT , links TEXT, added_on DATETIME)", []);
        });
      }

      // this function will use to add into storage
      html5rocks.webdb.addTodo = function(titleText,todoText,linkText) {
        var db = html5rocks.webdb.db;
        db.transaction(function(tx){
          var addedOn = new Date();
          tx.executeSql("INSERT INTO todo(title,todo,links, added_on) VALUES (?,?,?,?)",
              [titleText,todoText,linkText, addedOn],
              html5rocks.webdb.onSuccess,
              html5rocks.webdb.onError);
         });
      }
      
      //will show if have any error
      html5rocks.webdb.onError = function(tx, e) {
        alert("There has been an error: " + e.message);
      }
      //will show when success
      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);
        });
      }
     
      // function used to delete list using id list..
      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><a href='"+row.links+"'>" + row.todo  + "- [BY" + row.title + "]</a> [<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 title = document.getElementById("title");
        var todo = document.getElementById("todo");
        var link = document.getElementById("link");
        if(todo.value != "" || title.value != "" || link.value != "")
        {
            html5rocks.webdb.addTodo(title.value,todo.value,link.value);
        }
        else
            alert("Fill Field First");
        todo.value = "";
        title.value = "";
        link.value ="";
      }
    </script>
  </head>
  <body onload="init();">
    <ul id="todoItems">
    </ul>
    <form type="post" onsubmit="addTodo(); return false;">
      <input type="text" id="title" name="title" placeholder="Author" style="width: 300px;" /></br>
      <input type="text" id="todo" name="todo" placeholder="Put your Thread Title from PGC here " style="width: 300px;" /></br>
      <input type="text" id="link" name="link" placeholder="Link Here" style="width: 200px;" />
      <input type="submit" value="Add Todo Item"/>
    </form>
  </body>
</html>

I cant explain this line by line, but if you interesting to learn this stuff, you can ask me here..
what ever about HTML, CSS, Javascript, JQuery, SQL, PHP, ASP, JSP or other stuff..
i'll help you as i can...

hope this tutorial is usefull, and if i have a much time, i'll fix this post and make it better...

Credit To Paul Kinlan HTML 5 Rock...
awesome learning site

Thread: Make Listing Site using HTML 5 Storage Feature

Thread Tools

Display

Make Listing Site using HTML 5 Storage Feature

Similar Threads

[New Site] Art Of Drawing

CAn any1 make another download site for "Bug Money"?

[Guide] Aika Unique Set Effect Listing (Rank C-Level 50)

[Question] Special Feature?

Posting Permissions