רשימה פשוטה של משימות לביצוע באמצעות HTML5 WebDatabases

Paul Kinlan

מבוא

מסדי נתונים באינטרנט הם חדשים ב-HTML5. מסדי נתונים באינטרנט מתארחים ומתמידים בדפדפן של המשתמש. המפתחים יוכלו ליצור אפליקציות עם יכולות שאילתות עשירות, וכך צפויה להופיע דור חדש של יישומי אינטרנט עם יכולת לפעול אונליין ואופליין.

דוגמת הקוד במאמר הזה ממחישה איך ליצור מנהל פשוט מאוד של רשימת משימות. מדובר בסקירה כללית ברמה גבוהה מאוד של חלק מהתכונות הזמינות ב-HTML5.

דרישות מוקדמות

בדוגמה הזו נעשה שימוש במרחב שמות כדי להכיל את הלוגיקה של מסד הנתונים.

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

אסינכרוניות ועסקאות

ברוב המקרים שבהם אתם משתמשים בתמיכה במסד נתונים באינטרנט, אתם משתמשים ב-Asynchronous API. ה-API האסינכרוני הוא מערכת לא חוסמת, ולכן לא תקבל נתונים דרך ערכים שמוחזרים, אלא נתונים שיועברו לפונקציית קריאה חוזרת (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 בתוך טרנזקציה.

הגדרנו פונקציה שתוצריה יהיה טבלה באירוע ה-onload של הגוף. אם הטבלה לא קיימת, המערכת תיצור אותה.

הטבלה נקראת todo ויש לה 3 עמודות.

  • ID – עמודה של מזהה עוקב
  • 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 בטבלת המשימות.

הפונקציה 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, ב-Webdatabase נעשה שימוש בשאילתות 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א. עיבוד נתונים מטבלה

אחרי שהנתונים יישלפו מהטבלה, תתבצע קריאה ל-method 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>";
}

ההשפעה של קריאת ה-method הזו היא שרשימת המשימות עוברת עיבוד (render) לרכיב 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 = "";
}