परिचय
वेब डेटाबेस, 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 - आइटम का मुख्य हिस्सा, जो एक टेक्स्ट कॉलम होता है
- 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);
});
}
चरण 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 कॉल से डेटा नहीं मिलता. नतीजे, सफलता के कॉलबैक पर भेजे जाते हैं.
चौथा चरण. टेबल से डेटा रेंडर करना
टेबल से डेटा फ़ेच होने के बाद, 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" नाम के 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 = "";
}