शुरुआती जानकारी
वेब डेटाबेस HTML5 में नए हैं. वेब डेटाबेस, उपयोगकर्ता के ब्राउज़र में होस्ट और बने रहते हैं. डेवलपर को समृद्ध क्वेरी क्षमताओं वाले ऐप्लिकेशन बनाने की अनुमति देने से कल्पना की जाती है कि ऐसे वेब ऐप्लिकेशन की एक नई किस्म सामने आएगी, जिनमें ऑनलाइन और ऑफ़-लाइन काम करने की क्षमता होगी.
इस लेख में दिए गए उदाहरण कोड में, एक बेहद आसान काम की सूची मैनेजर बनाने का तरीका बताया गया है. यह HTML5 में उपलब्ध कुछ सुविधाओं का एक बहुत उच्च स्तरीय टूर है.
ज़रूरी शर्तें
यह सैंपल, डेटाबेस लॉजिक को इनकैप्सुलेट करने के लिए नेमस्पेस का इस्तेमाल करता है.
var html5rocks = {};
html5rocks.webdb = {};
एसिंक्रोनस और लेन-देन संबंधी
वेब डेटाबेस की सहायता का इस्तेमाल करने वाले ज़्यादातर मामलों में, एसिंक्रोनस एपीआई का इस्तेमाल किया जाएगा. एसिंक्रोनस एपीआई एक ब्लॉक करने वाला सिस्टम नहीं है. इस वजह से, इसे रिटर्न वैल्यू से डेटा नहीं मिलेगा. इसके बजाय, यह पहले से तय किए गए कॉलबैक फ़ंक्शन को डेटा डिलीवर करेगा.
एचटीएमएल के ज़रिए वेब डेटाबेस की सहायता लेन-देन से जुड़ी होती है. किसी ट्रांज़ैक्शन के अलावा, SQL स्टेटमेंट को एक्ज़ीक्यूट नहीं किया जा सकता.
ट्रांज़ैक्शन दो तरह के होते हैं: रीड/राइट ट्रांज़ैक्शन (transaction()) और रीड
ओनली ट्रांज़ैक्शन (readTransaction()). कृपया ध्यान दें कि पढ़ने/लिखने से पूरा डेटाबेस लॉक हो जाएगा.
पहला चरण. डेटाबेस खोलना
डेटाबेस को ऐक्सेस करने से पहले उसे खोलना ज़रूरी है.
आपको डेटाबेस का नाम, वर्शन, जानकारी, और साइज़ तय करना होगा.
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);
}
दूसरा चरण. टेबल बनाना
किसी ट्रांज़ैक्शन में 'टेबल बनाएं' एसक्यूएल स्टेटमेन को लागू करके ही टेबल बनाई जा सकती है.
हमने एक ऐसा फ़ंक्शन तय किया है जो बॉडी ऑनलोड इवेंट में टेबल बनाएगा. अगर टेबल पहले से मौजूद नहीं है, तो एक टेबल बनाई जाएगी.
इस टेबल को 'काम की सूची' कहा जाता है और इसमें तीन कॉलम होते हैं.
- आईडी - क्रम में बढ़ने वाला एक आईडी कॉलम
- काम की सूची - टेक्स्ट कॉलम जो आइटम का मुख्य हिस्सा है
- 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)", []);
});
}
तीसरा चरण. टेबल में डेटा जोड़ना
हम एक टू डू लिस्ट मैनेजर बना रहे हैं, इसलिए यह बहुत ज़रूरी है कि हम डेटाबेस में टूडू आइटम जोड़ सकें.
एक ट्रांज़ैक्शन शुरू हो जाता है और लेन-देन के अंदर, 'काम की सूची' में 'INSERT' दिया जाता है.
formulasql, कई पैरामीटर, एक्ज़ीक्यूट करने के लिए 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);
});
}
ध्यान दें कि इस सैंपल में इस्तेमाल किए गए ये सभी निर्देश, एसिंक्रोनस होते हैं. इसलिए, डेटा न तो लेन-देन या ActSql कॉल से वापस मिलता है. इन नतीजों को सफलता कॉलबैक के लिए भेजा जाता है.
चरण 4a. टेबल से डेटा रेंडर करना
टेबल से डेटा फ़ेच होने के बाद, loadTodoitems तरीके को कॉल किया जाएगा.
on Success कॉलबैक के लिए दो पैरामीटर इस्तेमाल होते हैं. पहली क्वेरी का ट्रांज़ैक्शन है और दूसरा नतीजे का सेट होता है. डेटा में दोहराना काफ़ी आसान है:
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>";
}
इस मेथड कॉल से, टूडू सूची को "todoitems" नाम के DOM एलिमेंट में रेंडर किया जाता है.
पांचवां चरण. टेबल से डेटा मिटाना
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();">
डीओएम से डेटा को बाहर ले जाने वाले फ़ंक्शन की ज़रूरत होती है, इसलिए html5rocks.webdb.addTodo तरीके को कॉल करें
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}