รายการสิ่งที่ต้องทำอย่างง่ายที่ใช้ HTML5 WebDatabase

Paul Kinlan

บทนำ

ฐานข้อมูลในเว็บเป็นองค์ประกอบใหม่ใน HTML5 ฐานข้อมูลเว็บจะโฮสต์และคงอยู่ในเบราว์เซอร์ของผู้ใช้ การเปิดโอกาสให้นักพัฒนาแอปสร้างแอปพลิเคชันที่มีความสามารถในการค้นหาที่หลากหลายได้นั้น จะช่วยให้เกิดเว็บแอปพลิเคชันรุ่นใหม่ที่ทำงานได้ทั้งแบบออนไลน์และออฟไลน์

โค้ดตัวอย่างในบทความนี้แสดงวิธีสร้างเครื่องมือจัดการรายการสิ่งที่ต้องทําที่ง่ายมาก บทแนะนำนี้เป็นการแนะนำฟีเจอร์บางอย่างที่มีให้ใช้งานใน HTML5

สิ่งที่ต้องดำเนินการก่อน

ตัวอย่างนี้ใช้เนมสเปซเพื่อรวมตรรกะฐานข้อมูล

var html5rocks = {};
html5rocks.webdb = {};

แบบอะซิงโครนัสและธุรกรรม

ในกรณีส่วนใหญ่ที่คุณใช้การรองรับฐานข้อมูลเว็บ คุณจะใช้ Asynchronous API Asynchronous API เป็นระบบที่ไม่บล็อก ดังนั้นจึงจะไม่ได้รับข้อมูลผ่านค่าที่แสดงผล แต่จะได้รับข้อมูลที่ส่งไปยังฟังก์ชันการเรียกกลับที่กําหนดไว้

การรองรับฐานข้อมูลเว็บผ่าน HTML เป็นแบบธุรกรรม คุณจะเรียกใช้คำสั่ง SQL นอกธุรกรรมไม่ได้ ธุรกรรมมี 2 ประเภท ได้แก่ ธุรกรรมแบบอ่าน/เขียน (transaction()) และธุรกรรมแบบอ่านอย่างเดียว (readTransaction()) โปรดทราบว่าการอ่าน/เขียนจะล็อกทั้งฐานข้อมูล

ขั้นตอนที่ 1 การเปิดฐานข้อมูล

ต้องเปิดฐานข้อมูลก่อนจึงจะเข้าถึงได้
คุณต้องกําหนดชื่อ เวอร์ชัน คําอธิบาย และขนาดของฐานข้อมูล

html5rocks.webdb.db = null;

html5rocks.webdb.open = function() {
var dbSize = 5 * 1024 * 1024; // 5MB
html5rocks.webdb.db = openDatabase("Todo", "1", "Todo manager", dbSize);
}

html5rocks.webdb.onError = function(tx, e) {
alert("There has been an error: " + e.message);
}

html5rocks.webdb.onSuccess = function(tx, r) {
// re-render the data.
// loadTodoItems is defined in Step 4a
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}

ขั้นตอนที่ 2 การสร้างตาราง

คุณสร้างตารางได้โดยการเรียกใช้คำสั่ง CREATE TABLE SQL ภายในธุรกรรมเท่านั้น

เราได้กําหนดฟังก์ชันที่จะสร้างตารางในเหตุการณ์ onload ของ body หากยังไม่มีตาราง ระบบจะสร้างตารางให้

ตารางนี้ชื่อ todo และมี 3 คอลัมน์

  • รหัส - คอลัมน์รหัสตามลําดับที่เพิ่มขึ้น
  • todo - คอลัมน์ข้อความที่เป็นเนื้อหาของรายการ
  • added_on - เวลาที่สร้างรายการสิ่งที่ต้องทํา
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)", []);
});
}

ขั้นตอนที่ 3 การเพิ่มข้อมูลลงในตาราง

เรากําลังสร้างเครื่องมือจัดการรายการสิ่งที่ต้องทํา ดังนั้นจึงเป็นเรื่องสําคัญมากที่เราจะเพิ่มรายการสิ่งที่ต้องทําลงในฐานข้อมูลได้

ระบบจะสร้างธุรกรรม และดำเนินการ INSERT ในตาราง todo ในธุรกรรม

executeSql ใช้พารามิเตอร์หลายรายการ ได้แก่ SQL ที่จะเรียกใช้ และค่าพารามิเตอร์เพื่อเชื่อมโยงการค้นหา

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);
});
}

ขั้นตอนที่ 4 การเลือกข้อมูลจากตาราง

เมื่อข้อมูลอยู่ในฐานข้อมูลแล้ว คุณต้องมีฟังก์ชันที่จะดึงข้อมูลกลับออกมา ใน Chrome เว็บฐานข้อมูลจะใช้การค้นหา SQLite SELECT มาตรฐาน

html5rocks.webdb.getAllTodoItems = function(renderFunc) {
var db = html5rocks.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM todo", [], renderFunc,
    html5rocks.webdb.onError);
});
}

โปรดทราบว่าคําสั่งทั้งหมดเหล่านี้ที่ใช้ในตัวอย่างนี้ทำงานแบบไม่พร้อมกัน ดังนั้นระบบจะไม่แสดงผลลัพธ์จากธุรกรรมหรือการเรียกใช้ executeSql ระบบจะส่งผลลัพธ์ไปยังการเรียกคืนสําเร็จ

ขั้นตอนที่ 4ก. การแสดงผลข้อมูลจากตาราง

เมื่อดึงข้อมูลจากตารางแล้ว ระบบจะเรียกใช้เมธอด loadTodoItems

ฟังก์ชัน Callback ของ onSuccess จะใช้พารามิเตอร์ 2 รายการ รายการแรกคือธุรกรรมของคําค้นหา และรายการที่ 2 คือชุดผลลัพธ์ การวนซ้ำข้อมูลนั้นทําได้ค่อนข้างง่าย โดยทําดังนี้

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>";
}

ผลของการเรียกใช้เมธอดนี้คือระบบจะแสดงผลรายการสิ่งที่ต้องทำเป็นองค์ประกอบ DOM ที่ชื่อ "todoItems"

ขั้นตอนที่ 5 การลบข้อมูลจากตาราง

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);
});
}

ขั้นตอนที่ 6 การเชื่อมต่ออุปกรณ์ทั้งหมด

เมื่อหน้าเว็บโหลด ให้เปิดฐานข้อมูลและสร้างตาราง (หากจำเป็น) และแสดงผลรายการสิ่งที่ต้องทําที่อาจอยู่ในฐานข้อมูลอยู่แล้ว

....
function init() {
html5rocks.webdb.open();
html5rocks.webdb.createTable();
html5rocks.webdb.getAllTodoItems(loadTodoItems);
}
</script>

<body onload="init();">

ต้องใช้ฟังก์ชันที่ดึงข้อมูลจาก DOM ดังนั้น ให้เรียกใช้เมธอด html5rocks.webdb.addTodo

function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}