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;
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...
:D 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 :D
