परिचय
वेब डेटाबेस, HTML5 में नई सुविधा है. वेब डेटाबेस, उपयोगकर्ता के ब्राउज़र में होस्ट और सेव किए जाते हैं. डेवलपर को बेहतर क्वेरी सुविधाओं वाले ऐप्लिकेशन बनाने की अनुमति देने से, हमें उम्मीद है कि वेब ऐप्लिकेशन की एक नई कैटगरी सामने आएगी. ये ऐप्लिकेशन, ऑनलाइन और ऑफ़लाइन, दोनों तरह से काम कर सकेंगे.
इस लेख में दिए गए कोड के उदाहरण से, बहुत ही आसान टास्क लिस्ट मैनेजर बनाने का तरीका बताया गया है. यह HTML5 में उपलब्ध कुछ सुविधाओं के बारे में खास जानकारी है.
ज़रूरी शर्तें
इस सैंपल में, डेटाबेस लॉजिक को एनकैप्सुलेट करने के लिए नेमस्पेस का इस्तेमाल किया गया है.
var html5rocks = {};
html5rocks.webdb = {};
एसिंक्रोनस और ट्रांज़ैक्शनल
ज़्यादातर मामलों में, वेब डेटाबेस की सुविधा का इस्तेमाल करते समय, एसिंक्रोनस एपीआई का इस्तेमाल किया जाएगा. एसिंक्रोनस एपीआई, एक नॉन-ब्लॉकिंग सिस्टम है. इसलिए, इसमें रिटर्न वैल्यू के ज़रिए डेटा नहीं मिलता. इसके बजाय, डेटा को तय किए गए कॉलबैक फ़ंक्शन पर डिलीवर किया जाता है.
एचटीएमएल के ज़रिए वेब डेटाबेस की सुविधा, ट्रांज़ैक्शनल होती है. लेन-देन के बाहर, एसक्यूएल स्टेटमेंट को एक्ज़ीक्यूट नहीं किया जा सकता.
लेन-देन दो तरह के होते हैं: रीड/राइट लेन-देन (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);
}
दूसरा चरण. टेबल बनाना
किसी लेन-देन के अंदर CREATE TABLE SQL स्टेटमेंट को लागू करके ही टेबल बनाई जा सकती है.
हमने एक फ़ंक्शन तय किया है, जो बॉडी ऑनलोड इवेंट में एक टेबल बनाएगा. अगर टेबल पहले से मौजूद नहीं है, तो एक टेबल बनाई जाएगी.
टेबल का नाम todo है और इसमें तीन कॉलम हैं.
- आईडी - क्रम से बढ़ते आईडी वाला कॉलम
- todo - a text column that is the body of the item
- 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)", []);
});
}
तीसरा चरण. टेबल में डेटा जोड़ना
हम एक टू-डू लिस्ट मैनेजर बना रहे हैं. इसलिए, यह बहुत ज़रूरी है कि हम डेटाबेस में टू-डू आइटम जोड़ सकें.
एक लेन-देन बनाया जाता है. लेन-देन के अंदर, todo टेबल में 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);
});
}
चौथा चरण. टेबल से डेटा चुनना
अब डेटाबेस में डेटा मौजूद है. इसलिए, आपको एक ऐसे फ़ंक्शन की ज़रूरत होगी जो डेटा को वापस ला सके. 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 कॉल से डेटा नहीं मिलता. नतीजों को सक्सेस कॉलबैक में पास किया जाता है.
चौथा चरण. टेबल से डेटा रेंडर करना
टेबल से डेटा फ़ेच होने के बाद, 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>";
}
इस तरीके को कॉल करने पर, टास्क की सूची को "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();">
डीओएम से डेटा निकालने के लिए एक फ़ंक्शन की ज़रूरत होती है. इसलिए, html5rocks.webdb.addTodo तरीके को कॉल करें
function addTodo() {
var todo = document.getElementById("todo");
html5rocks.webdb.addTodo(todo.value);
todo.value = "";
}