รายการสิ่งที่ต้องทำอย่างง่ายที่ใช้ 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 กำลังสร้างตาราง

คุณจะสร้างตารางได้โดยใช้คำสั่ง SQL สำหรับ "สร้างตาราง" ภายในธุรกรรมเท่านั้น

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

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

• ID - คอลัมน์รหัสตามลำดับที่เพิ่มขึ้น
• todo - คอลัมน์ข้อความที่ส่วนเนื้อหาของรายการ
• add_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 การเพิ่มข้อมูลลงในตาราง

เรากำลังสร้างตัวจัดการรายการสิ่งที่ต้องทำ จึงมีความสำคัญมากทีเดียว ที่เราสามารถเพิ่มรายการสิ่งที่ต้องทำลงในฐานข้อมูลได้

ระบบจะสร้างธุรกรรมภายในธุรกรรมที่มีการดำเนินการ "แทรก" ลงในตารางสิ่งที่ต้องทำ

ActionsSql จะใช้พารามิเตอร์หลายรายการ รวมถึง 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 ใน Webdatabase

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

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

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

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

โค้ดเรียกกลับ 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 = "";
}