BackboneJS Model এবং Collection ক্লাসগুলোকে server-side interaction এর জন্য ব্যবহার করা যেতে পারে। এতে আপনি AJAX বা অন্যান্য HTTP রিকোয়েস্ট ব্যবহার করে RESTful API এর মাধ্যমে ডেটা লোড এবং সেভ করতে পারেন। BackboneJS এই ধরনের ইন্টারঅ্যাকশন সহজ করে দেয়, কারণ এটি sync মেথডের মাধ্যমে সার্ভারের সাথে যোগাযোগ সহজভাবে পরিচালনা করতে সহায়তা করে।
BackboneJS Model এবং Collection এর মধ্যে সার্ভার সাইড ইন্টারঅ্যাকশন মূলত CRUD (Create, Read, Update, Delete) অপারেশনগুলো পরিচালনা করে। চলুন, দেখে নেওয়া যাক কিভাবে এগুলো ব্যবহার করা যায়।
1. Model এর মাধ্যমে Server-Side Interaction
BackboneJS এর Model ক্লাস ব্যবহার করে আপনি একক ডেটার সাথে সার্ভার থেকে ডেটা ফেচ বা সেভ করতে পারেন। এটি sync মেথড ব্যবহার করে, যা ডেটা সেভ বা ফেচ করার সময় HTTP রিকোয়েস্ট পাঠায় এবং সার্ভারের রেসপন্স গ্রহণ করে।
Model: Server-Side Interaction Example
var Task = Backbone.Model.extend({
urlRoot: '/api/tasks', // সার্ভারের URL যা এই মডেলের জন্য ব্যবহার হবে
defaults: {
title: 'New Task',
completed: false
},
// এই মডেলটি যখন সার্ভারে সেভ হবে, তখন এটি POST রিকোয়েস্ট করবে
saveTask: function() {
this.save({ title: this.get('title'), completed: this.get('completed') });
},
// এই মডেলটি যখন সার্ভার থেকে ফেচ হবে, তখন এটি GET রিকোয়েস্ট করবে
fetchTask: function() {
this.fetch();
}
});
// নতুন টাস্ক তৈরি এবং ফেচ করা
var task = new Task({ id: 1 });
task.fetchTask(); // সার্ভার থেকে টাস্কের ডেটা ফেচ করবে
// টাস্ক সেভ করা
task.saveTask(); // টাস্কের নতুন ডেটা সার্ভারে সেভ হবে
Model এর সার্ভার রিকোয়েস্ট
BackboneJS স্বয়ংক্রিয়ভাবে GET, POST, PUT, এবং DELETE HTTP রিকোয়েস্ট পরিচালনা করে, যখন আপনি fetch(), save() এবং destroy() মেথড ব্যবহার করেন।
fetch(): এটি একটি GET রিকোয়েস্ট পাঠায় সার্ভার থেকে ডেটা ফেচ করার জন্য।save(): এটি একটি POST বা PUT রিকোয়েস্ট পাঠায়, যদি মডেল নতুন হয় তবে POST এবং যদি মডেল আপডেট হয় তবে PUT রিকোয়েস্ট পাঠায়।destroy(): এটি একটি DELETE রিকোয়েস্ট পাঠায়, মডেলটি সার্ভার থেকে মুছে ফেলতে।
2. Collection এর মাধ্যমে Server-Side Interaction
BackboneJS এর Collection ক্লাস ব্যবহার করে আপনি একাধিক মডেলের (models) সাথে সার্ভার থেকে ডেটা ফেচ বা সেভ করতে পারেন। Collection এর sync মেথড একইভাবে কাজ করে, কিন্তু এটি গ্রুপ মডেলগুলির উপর ক্রিয়াকলাপ চালায়।
Collection: Server-Side Interaction Example
var TaskList = Backbone.Collection.extend({
model: Task, // এই Collection শুধুমাত্র Task মডেল ধারণ করবে
url: '/api/tasks' // সার্ভারের URL
});
// সার্ভার থেকে সমস্ত টাস্ক ফেচ করা
var tasks = new TaskList();
tasks.fetch({
success: function(collection, response, options) {
console.log('Tasks fetched successfully:', collection.toJSON());
},
error: function(collection, response, options) {
console.log('Error fetching tasks');
}
});
// নতুন টাস্ক সার্ভারে সেভ করা
var newTask = new Task({ title: 'New Task', completed: false });
tasks.create(newTask, {
success: function(model, response, options) {
console.log('New task created:', model.toJSON());
},
error: function(model, response, options) {
console.log('Error creating task');
}
});
Collection এর সার্ভার রিকোয়েস্ট
BackboneJS Collection এর মাধ্যমে আপনি POST, GET, PUT, এবং DELETE রিকোয়েস্টগুলো ব্যবহার করতে পারেন:
fetch(): সমস্ত মডেল সংগ্রহ করতে GET রিকোয়েস্ট পাঠাবে।create(): নতুন মডেল তৈরি করতে POST রিকোয়েস্ট পাঠাবে।update(): মডেল আপডেট করতে PUT রিকোয়েস্ট পাঠাবে।destroy(): মডেল মুছে ফেলতে DELETE রিকোয়েস্ট পাঠাবে।
3. BackboneJS Model এবং Collection এর সাথে Custom Sync
BackboneJS এর sync মেথড ডিফল্টভাবে ডেটাবেস বা সার্ভারের সাথে যোগাযোগের জন্য HTTP রিকোয়েস্ট ব্যবহারের জন্য কনফিগার করা থাকে। তবে, আপনি যদি প্রয়োজনীয় কাস্টম সার্ভার ইন্টারঅ্যাকশন চান, তাহলে আপনি নিজে একটি custom sync মেথডও তৈরি করতে পারেন।
Custom Sync Example
var Task = Backbone.Model.extend({
urlRoot: '/api/tasks',
// Custom Sync method
sync: function(method, model, options) {
if (method === 'read') {
// GET রিকোয়েস্টের জন্য কাস্টম কোড
options.url = '/api/custom_tasks';
return Backbone.sync.call(this, method, model, options);
} else if (method === 'create') {
// POST রিকোয়েস্টের জন্য কাস্টম কোড
options.url = '/api/create_task';
return Backbone.sync.call(this, method, model, options);
}
// অন্যান্য রিকোয়েস্টের জন্য ডিফল্ট sync মেথড
return Backbone.sync.call(this, method, model, options);
}
});
var task = new Task();
task.fetch(); // এই সময় custom sync মেথড কাজ করবে
4. Authentication এবং Authorization
BackboneJS মডেল এবং কলেকশনের সাথে সার্ভার সাইড ইন্টারঅ্যাকশন করতে হলে প্রায়শই Authentication (যেমন JWT token) এবং Authorization (যেমন API key) প্রয়োজন হয়। আপনি HTTP headers ব্যবহার করে টোকেন বা কুকি যোগ করতে পারেন যাতে সার্ভারের সাথে নিরাপদ ইন্টারঅ্যাকশন করা যায়।
Authentication Header Example
var Task = Backbone.Model.extend({
urlRoot: '/api/tasks',
// Authentication Header যোগ করা
sync: function(method, model, options) {
options.beforeSend = function(xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('authToken'));
};
return Backbone.sync.call(this, method, model, options);
}
});
var task = new Task({ id: 1 });
task.fetch(); // Authorization header সহ GET রিকোয়েস্ট হবে
5. Error Handling
আপনি যখন Model বা Collection এর মাধ্যমে সার্ভার সাইড ইন্টারঅ্যাকশন করেন, তখন এটি সম্ভবত ত্রুটি ঘটতে পারে। আপনি error callback ব্যবহার করে সার্ভারের রেসপন্স ত্রুটি (error) পরিচালনা করতে পারেন।
Error Handling Example
var Task = Backbone.Model.extend({
urlRoot: '/api/tasks'
});
var task = new Task({ id: 1 });
task.fetch({
success: function(model, response) {
console.log('Task fetched successfully:', model.toJSON());
},
error: function(model, response) {
console.log('Error fetching task:', response.statusText);
}
});
সারাংশ
BackboneJS এর Model এবং Collection এর মাধ্যমে server-side interaction সহজভাবে করা যায়। আপনি AJAX রিকোয়েস্ট ব্যবহার করে সার্ভার থেকে ডেটা ফেচ, সেভ, আপডেট এবং মুছতে পারেন। BackboneJS sync মেথড স্বয়ংক্রিয়ভাবে সার্ভার রিকোয়েস্টগুলি পরিচালনা করে এবং কাস্টম সার্ভার ইন্টারঅ্যাকশন তৈরির জন্য আপনি নিজের custom sync মেথডও তৈরি করতে পারেন।
এছাড়া, আপনি Authentication এবং Authorization হ্যান্ডলিং, এবং error handling এর মাধ্যমে সিকিউরড এবং রিলায়েবল সার্ভার সাইড ইন্টারঅ্যাকশন করতে পারেন।
Read more