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

Paul Kinlan

מבוא

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

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

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

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

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

אסינכרוני או טרנזקטיבי

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

התמיכה במסד הנתונים באינטרנט באמצעות 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 בתוך טרנזקציה.

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

הטבלה נקראת 'לביצוע' ויש בה 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. הוספת נתונים לטבלה

אנחנו יוצרים מנהל של רשימת משימות, ולכן חשוב מאוד שנוכל להוסיף למסד הנתונים פריטים של משימות.

נוצרת טרנזקציה, ובתוך טרנזקציה מבוצעת INSERT לטבלת המשימות.

השדה ExplorerSql לוקח מספר פרמטרים, את ה-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);
});
}

שימו לב שכל הפקודות שנעשה בהן שימוש בדוגמה הזו הן אסינכרוניות ולכן הנתונים לא מוחזרים מהטרנזקציה או מהקריאה ל-ActivateSql. התוצאות מועברות לקריאה החוזרת (callback) שהושלמה.

שלב 4א. עיבוד נתונים מטבלה

אחרי אחזור הנתונים מהטבלה, תתבצע קריאה לשיטה loadTodoItems.

הקריאה החוזרת (callback) ב-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 = "";
}