قائمة TODO بسيطة تستخدم قواعد بيانات الويب في HTML5

Paul Kinlan

مقدمة

قواعد بيانات الويب جديدة في HTML5. تتم استضافة قواعد بيانات الويب والاحتفاظ بها داخل متصفّح المستخدم. من خلال السماح للمطوّرين بإنشاء تطبيقات ذات قدرات ثرية لطلبات البحث، ظهرت لنا أنواع جديدة من تطبيقات الويب يمكنها العمل على الإنترنت وبلا إنترنت.

يوضح المثال التعليمة البرمجية في هذه المقالة كيفية إنشاء مدير قائمة مهام بسيط للغاية. إنها جولة عالية المستوى جدًا لبعض الميزات المتوفرة في HTML5.

المتطلّبات الأساسية

يستخدم هذا النموذج مساحة اسم لتغليف منطق قاعدة البيانات.

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

غير المتزامن والمعاملات

في معظم الحالات التي تستخدم فيها دعم قاعدة بيانات الويب، ستستخدم واجهة برمجة التطبيقات غير المتزامنة. إنّ واجهة برمجة التطبيقات غير المتزامنة هي نظام لا يؤدي إلى الحظر، وبالتالي لن تحصل على البيانات من خلال القيم المعروضة، بل ستحصل على البيانات عبر دالة رد اتصال محددة.

يعد دعم قاعدة بيانات الويب من خلال 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. إنشاء جدول

يمكنك فقط إنشاء جدول عن طريق تنفيذ قواعد SQL في CREATE TABLE داخل معاملة.

لقد عرّفنا دالة تُنشئ جدولاً في حدث body onload. إذا لم يكن الجدول متوفّرًا، سيتمّ إنشاء جدول.

يسمى الجدول todo ويحتوي على 3 أعمدة.

  • المعرف - عمود معرف تسلسلي متزايد
  • 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. إضافة البيانات إلى جدول

نحن ننشئ مدير قائمة مهام، لذا من المهم جدًا أن نتمكن من إضافة عناصر المهام إلى قاعدة البيانات.

يتم إنشاء معاملة، ويتم تنفيذ إدراج INSERT في جدول المهام، داخل العملية.

تأخذ 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(أ): عرض البيانات من جدول

بمجرد استرجاع البيانات من الجدول، سيتم استدعاء طريقة uploadTodoItems.

هناك مَعلمتان لمعاودة الاتصال 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".

الخطوة الخامسة. حذف البيانات من جدول

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