Results 1 to 1 of 1
  1. #1
    emoisback
    emoisback is offline
    Full member
    Join Date
    2011 Dec
    Location
    Indonesia there i'm
    Posts
    508
    Thanks
    83
    Thanked 244 Times in 68 Posts
    Rep Power
    6

    Make Listing Site using HTML 5 Storage Feature

    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;
            
    font14px Arial;
          }

          
    body a {
            
    color#3D5C9D;
            
    text-decorationnone;
          }
        </
    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 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(txe) {
            
    alert("There has been an error: " e.message);
          }
          
          
    // when success open storage
          
    html5rocks.webdb.onSuccess = function(txr) {
            
    // 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(txrs) {
            var 
    rowOutput "";
            var 
    todoItems document.getElementById("todoItems");
            for (var 
    i=0rs.rows.lengthi++) {
              
    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;
            
    font14px Arial;
          }

          
    body a {
            
    color#3D5C9D;
            
    text-decorationnone;
          }
        </
    style>
        <
    script>
          var 
    html5rocks = {};
          
    html5rocks.webdb = {};
          
    html5rocks.webdb.db null;

          
    html5rocks.webdb.open = function() {
            var 
    dbSize 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,linkTextaddedOn],
                  
    html5rocks.webdb.onSuccess,
                  
    html5rocks.webdb.onError);
             });
          }
          
          
    //will show if have any error
          
    html5rocks.webdb.onError = function(txe) {
            
    alert("There has been an error: " e.message);
          }
          
    //will show when success
          
    html5rocks.webdb.onSuccess = function(txr) {
            
    // 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(txrs) {
            var 
    rowOutput "";
            var 
    todoItems document.getElementById("todoItems");
            for (var 
    i=0rs.rows.lengthi++) {
              
    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
    Learn from PGC for Share on PGC..


    For another Stuff i have make try to find it [Please, register to view links]
    If i have help you, please thanks and respect ..

Similar Threads

  1. [New Site] Art Of Drawing
    By laika12 in forum Português
    Replies: 0
    Last Post: 2012-07-07, 02:35 PM
  2. CAn any1 make another download site for "Bug Money"?
    By stereoboi in forum Requiem Online
    Replies: 1
    Last Post: 2010-11-29, 03:49 PM
  3. [Guide] Aika Unique Set Effect Listing (Rank C-Level 50)
    By rainsky21 in forum Aika Guides, Tutorials
    Replies: 4
    Last Post: 2010-11-26, 03:14 AM
  4. [Question] Special Feature?
    By Atmosk in forum Requiem Online
    Replies: 1
    Last Post: 2010-10-24, 01:21 AM
Visitors found this page by searching for:

storage php source

html5rocks.webdb

html webdb php

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •