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

Paul Kinlan

مقدمة

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

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

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

يستخدم هذا المثال مساحة اسم لتضمين منطق قاعدة البيانات.

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

غير المتزامنة والرسائل الإلكترونية للعمليات

في معظم الحالات التي تستخدم فيها دعم قاعدة بيانات الويب، ستستخدم واجهة برمجة التطبيقات غير المتزامنة. واجهة برمجة التطبيقات غير المتزامنة هي نظام غير حظر، وبالتالي لن تحصل على البيانات من خلال القيم المعروضة، بل ستتلقّى البيانات التي يتم إرسالها إلى دالة 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 أعمدة.

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

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

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

يأخذ executeSql عدة مَعلمات، وهي لغة الاستعلام البنيوية المطلوب تنفيذها ومَعلمات القيم لربط الطلب.

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. يتم تمرير النتائج إلى دالّة callback الخاصة بالنجاح.

الخطوة 4(أ): عرض البيانات من جدول

بعد جلب البيانات من الجدول، سيتم استدعاء الأسلوب 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".

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

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