یک لیست TODO ساده با استفاده از پایگاه داده های وب HTML5

Paul Kinlan

معرفی

پایگاه داده های وب در HTML5 جدید هستند. پایگاه‌های داده وب در مرورگر کاربر میزبانی و نگهداری می‌شوند. با اجازه به توسعه دهندگان برای ایجاد برنامه های کاربردی با توانایی های جستجوی غنی، تصور می شود که نسل جدیدی از برنامه های کاربردی وب ظاهر می شود که توانایی کار آنلاین و آفلاین را دارند.

کد مثال در این مقاله نحوه ایجاد یک مدیر لیست کارهای بسیار ساده را نشان می دهد. این یک تور در سطح بسیار بالایی از برخی از ویژگی های موجود در HTML5 است.

پیش نیازها

این نمونه از یک فضای نام برای کپسوله کردن منطق پایگاه داده استفاده می کند.

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

ناهمزمان و تراکنشی

در اکثر مواردی که از پشتیبانی پایگاه داده وب استفاده می کنید، از API Asynchronous استفاده می کنید. API Asynchronous یک سیستم غیر مسدود کننده است و به این ترتیب داده ها را از طریق مقادیر بازگشتی دریافت نمی کند، بلکه داده ها را به یک تابع callback تعریف شده تحویل می دهد.

پشتیبانی پایگاه داده وب از طریق HTML تراکنشی است. اجرای دستورات SQL خارج از تراکنش ممکن نیست. دو نوع تراکنش وجود دارد: تراکنش های خواندن/نوشتن ( 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 در داخل یک تراکنش یک جدول ایجاد کنید.

ما تابعی را تعریف کرده‌ایم که جدولی را در رویداد بارگذاری بدنه ایجاد می‌کند. اگر جدول از قبل وجود نداشته باشد، یک جدول ایجاد می شود.

جدول todo نامیده می شود و دارای 3 ستون است.

• ID - یک ستون شناسه متوالی در حال افزایش
• todo - یک ستون متنی که بدنه مورد است
• add_on - زمانی که مورد todo ایجاد شد

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. انتخاب داده ها از یک جدول

اکنون که داده‌ها در پایگاه داده هستند، به تابعی نیاز دارید که داده‌ها را بازگرداند. در کروم، پایگاه داده وب از پرسش‌های استاندارد 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 بازگردانده نمی شوند. نتایج از طریق پاسخ به تماس موفقیت آمیز ارسال می شود.

مرحله 4a. ارائه داده ها از یک جدول

هنگامی که داده ها از جدول واکشی شدند، متد loadTodoItems فراخوانی می شود.

پاسخ به تماس onSuccess دو پارامتر دارد. اولی تراکنش پرس و جو و دومی مجموعه نتیجه است. تکرار در میان داده ها نسبتاً ساده است:

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