ভূমিকা
ওয়েব ডেটাবেস HTML5 এ নতুন। ওয়েব ডেটাবেস একটি ব্যবহারকারীর ব্রাউজারে হোস্ট করা এবং স্থায়ী হয়। বিকাশকারীদের সমৃদ্ধ ক্যোয়ারী ক্ষমতা সহ অ্যাপ্লিকেশন তৈরি করার অনুমতি দিয়ে এটি কল্পনা করা হয় যে ওয়েব অ্যাপ্লিকেশনগুলির একটি নতুন জাত আবির্ভূত হবে যা অনলাইন এবং অফ-লাইনে কাজ করার ক্ষমতা রাখে।
এই নিবন্ধের উদাহরণ কোডটি দেখায় কিভাবে একটি খুব সহজ টোডো তালিকা ম্যানেজার তৈরি করতে হয়। এটি HTML5 এ উপলব্ধ কিছু বৈশিষ্ট্যের একটি অত্যন্ত উচ্চ স্তরের সফর৷
প্রাক-প্রয়োজনীয়
এই নমুনা ডাটাবেস লজিক এনক্যাপসুলেট করার জন্য একটি নামস্থান ব্যবহার করে।
var html5rocks = {};
html5rocks.webdb = {};
অ্যাসিঙ্ক্রোনাস এবং লেনদেন
বেশিরভাগ ক্ষেত্রে যেখানে আপনি ওয়েব ডেটাবেস সমর্থন ব্যবহার করছেন আপনি অ্যাসিঙ্ক্রোনাস 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. একটি টেবিল তৈরি করা
আপনি শুধুমাত্র একটি লেনদেনের মধ্যে একটি সারণী তৈরি করুন এসকিউএল স্টেটম্যান সম্পাদন করে একটি টেবিল তৈরি করতে পারেন৷
আমরা একটি ফাংশন সংজ্ঞায়িত করেছি যা বডি অনলোড ইভেন্টে একটি টেবিল তৈরি করবে। যদি টেবিলটি ইতিমধ্যে বিদ্যমান না থাকে তবে একটি টেবিল তৈরি করা হবে।
টেবিলটিকে টোডো বলা হয় এবং এতে 3টি কলাম রয়েছে।
- আইডি - একটি ক্রমবর্ধমান ক্রমিক আইডি কলাম
- 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 করা হয়।
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. একটি টেবিল থেকে ডেটা নির্বাচন করা
এখন যেহেতু ডেটা ডাটাবেসে রয়েছে, আপনার একটি ফাংশন দরকার যা ডেটা ফিরে পায়। ক্রোমে, ওয়েবডেটাবেসের স্ট্যান্ডার্ড 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 কল থেকে ডেটা ফেরত দেওয়া হয় না। ফলাফল সফল কলব্যাক মাধ্যমে পাস করা হয়.
ধাপ 4a। একটি টেবিল থেকে তথ্য রেন্ডারিং
একবার টেবিল থেকে ডেটা আনা হয়ে গেলে, 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 উপাদানে রেন্ডার করা হয়।
ধাপ 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 = "";
}